限制文本的行数为x，并附加'…'

Limit text to x number of lines and append '...'

本文关键字：文本      更新时间：2023-09-26

我正在寻找一个Javascript/jQuery + CSS的方式来限制文本(例如一个产品名称)，以说，2行。但是访问者需要知道它被截断了，因此我需要添加"…"

我最初想到的方法是将文本放在一行中，测量它的宽度，并在文本达到2倍于包含div的宽度之前将其切断，但这似乎很棘手，因为每个字符可能需要计算其宽度而不是那样。

将其限制为字符或单词的数量在这种情况下是行不通的-我希望每次都完全填充该div的2行，而不是有空白。

是否有一个很好的方法来实现这一点，而不是使用等宽字体?

既然你正在使用jQuery，试试这些插件:

  • http://dotdotdot.frebsite.nl/
  • https://pvdspek.github.com/jquery.autoellipsis/
  • https://github.com/theproductguy/ThreeDots
  • https://github.com/jjenzz/jquery.ellipsis

我们可以使用css:

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block; /* for links */
}
相关文章：