垂直切断长文本答案

【问题标题】：Vertically cut off long text垂直切断长文本
【发布时间】：2019-10-30 20:02:37
【问题描述】：

最后一个可见的文本行应该在 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>

【问题讨论】：

overflow:hidden ignoring bottom padding的可能重复

标签： html css

【解决方案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）

【讨论】：