Div内未知大小的文本的底部填充 [英] Bottom padding of an unknown-size text inside a Div

问题描述

在这里，我想在Div的底部添加文本填充/边距，以使外观更加井井有条.

Here I want to have a text padding/margin on the bottom part of my Div, to have a more organized and tidier look.

我希望它具有灵活性，并在那里处理未知大小的文本.

I want it to be flexible and handle to an unknown size text there.

.container {
  width: 180px;
  height: 140px;
  background-color: #777;
  overflow: hidden;
  /*padding-bottom: 10px; */
}

.inner {
  /* height: 134px;   */
}

p {
  margin-bottom: 10px;
}

<div class="container">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
      veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
      velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
      consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
  </div>
</div>

推荐答案

您可以使用粘滞的位置元素来破解它，该元素会定义边距:

You may hack it with a sticky position element that will define you margin:

.container {
  width: 180px;
  height: 140px;
  background-color: #777;
  overflow: hidden;
}

.container:after {
  content: "";
  display: block;
  height: 15px;
  position: sticky;
  bottom: 0;
  background: inherit;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
    veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
    velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
    consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>

更通用的代码是添加两个伪元素并从p

A more generic code would be to add both pseudo element and remove the margin from p

.container {
  width: 180px;
  height: 140px;
  background-color: #777;
  overflow: hidden;
}

.container:before,
.container:after {
  content: "";
  display: block;
  height: 15px;
  position: sticky;
  top:0;
  bottom: 0;
  background: inherit;
}

p {
  margin: 0;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
    veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
    velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
    consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>

如果您要考虑滚动，则后者也可以使用:

The latter will also work if you want to consider scroll:

.container {
  width: 180px;
  height: 140px;
  background-color: #777;
  overflow: auto;
}

.container:before,
.container:after {
  content: "";
  display: block;
  height: 15px;
  position: sticky;
  top:0;
  bottom: 0;
  background: inherit;
}

p {
  margin: 0;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
    veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
    velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
    consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>

您还可以如下限制内部div的高度:

You can also limit the height of inner div like below:

.container {
  width: 180px;
  height: 140px;
  overflow: hidden;
  background-color: #777;
}

.inner {
  height:calc(100% - 2*15px);
  overflow: hidden;
  margin:15px 0;
}
p {
  margin:0;
}

<div class="container">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
      veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
      velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
      consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
  </div>
</div>

这篇关于Div内未知大小的文本的底部填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！