在阅读更多之前切断文本

Question

我有大部分时间都适合div的文本，但有时它不合适。没有办法确定div中有多少个字符/单词/段落，所以我无法将其剪掉。

div有一个固定的高度和宽度，那么我们可以做些什么呢？或者你有什么建议如何以正确的方式获得div中的所有内容？

Answer 1

如果文字不合适，你可以使用css elipses使它看起来更清洁。也许将文本放在隐藏元素中并测量高度以查看是否需要包含（更多）链接。

请参阅http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Answer 2

是的，你可以用它做点什么。向问题div提供overflow: hidden。然后将div高度设置为line-height的某个倍数（这取决于您要显示的行数），这样您就不必切断文本的底部。

Answer 3

您可以在css中使用不同的溢出值，“auto”应该会在文本大于高度/宽度允许时显示滚动条，或者“隐藏”以将其剪切掉。

请参阅：http://www.quirksmode.org/css/overflow.html

Answer 4

使用此类是解决此类问题的最佳方法：

.truncate {
  width: 200px;      // Here you can also use ems as measure of width
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 5

我在JavaScript中编写了一个以文本块开头的截断函数，如果它检测到溢出(scrollheight > height)，它会开始删除单词直到它适合，然后添加“查看更多”  链接。