Question

最后一个可见的文本行应位于20px的填充范围内……否则，请完全删除。

问题是h3的文本长度始终不同。因此，我不知道要削减多少。

现在，文本将忽略填充并保持在底部附近。

我该怎么做？该框必须保持100px的高度。

.box {
height: 50px;
width: 100px;
background: antiquewhite;
overflow: hidden;
padding: 20px;}

h3 {边距：0;}

<div class="box"><h3>Various</h3>Loremipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>

Answer 1

您可以在父级底部添加一个绝对定位的空DIV作为子级DIV，其背景颜色与父级相同：

.box {
  position: relative;
  height: 50px;
  width: 100px;
  background: antiquewhite;
  overflow: hidden;
  padding: 20px;
}

.x {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: antiquewhite;
}

<div class="box"> Loremipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  <div class="x"></div>
</div>

（根据需要调整子div的高度，并注意父母需要拥有position: relative）

垂直切断长文本

1 个答案: