Question

如何在css中隐藏最后隐藏的文本。容器样式是：

.container{
  overflow:hidden
}

enter image description here

完整代码：JSFiddle

Answer 1

这个问题有两种方法，第一种是使用简单的淡出（淡出比掩蔽更容易，因为有效的掩蔽＆＃39;涉及知道给定元素的显式字体大小为渲染），为此我建议使用伪元素，::after：

＆＃13;

.container {
  width: 100px;
  height: 98px;
  overflow: hidden;
  border: 1px solid red;
  position: relative;
}
.container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 10px 7px #fff;
}

＆＃13;

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>
</div>

＆＃13;

这可以通过在框的底部添加一个伪元素，在整个宽度上添加一个伪元素，并使用位于元素顶部的box-shadow box-shadow提供淡化效果。数字（10px和7px）在某种程度上是随意的，但它通常是预期的用户界面，它并不精确。＆＃39;

另一种方法是使用JavaScript（您在评论中说，您无法更改元素的高度）将文本的line-height设置为一个值导致部分隐藏＆＃39;要完全隐藏的文本行。一个天真的方法，就是使用一个函数将元素的高度除以你希望在该元素中出现的行数，将该数字置于楼层，然后设置元素的line-height（通过style属性）到那个高度：

＆＃13;

function showOnlyCompleteLines(elem, lines) {
  var computed = window.getComputedStyle(elem, null),
    height = parseFloat(computed.height),
    fontSize = parseFloat(computed.fontSize),
    lineHeight = Math.floor(height / 6);
  elem.style.lineHeight = lineHeight + 'px';
}

showOnlyCompleteLines(document.querySelector('div.container'));

＆＃13;

.container {
  width: 100px;
  height: 98px;
  overflow: hidden;
  border: 1px solid red;
  position: relative;
}
.container p {
  margin: 0;
}

＆＃13;

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>
</div>

＆＃13;

这种方法的缺点是，当然，您必须手动声明可见线的数量，这些线可能适合或可能不适合用户的屏幕。

参考文献：

CSS：
- Generated content, automatic numbering, and lists: The :before and :after pseudo-elements。
JavaScript的：
- HTMLElement.style。
- Math.floor()。
- parseFloat()。
- Window.getComputedStyle()。

Answer 2

您需要调整容器的高度以补偿这一点。否则你会看到。

<强> Soultion

最好的方法是使用JavaScript来计算字符并隐藏任何内容。

Answer 3

将overflow height等添加到p元素http://jsfiddle.net/shafips/0pgy7o5d/

p{
width:100px;
height:180px;
overflow:hidden;
border:1px solid red;
}

如何调整溢出隐藏div下的隐藏文本

3 个答案: