将文本限制为x行数并附加“...”

Question

我正在寻找一种Javascript / jQuery + CSS方式将文本（例如产品名称）限制为比如2行。但是访问者需要知道它被截断了，因此我需要在最后添加“...”。

我想到这样做的原始方法是将文本放在一行，测量它的宽度，然后在文本达到包含div的宽度的2倍之前将其剪掉，但它似乎很棘手，因为每个角色可能需要计算其宽度而不是那个。

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

有没有一种很好的方法来实现这一点，而不是使用等宽字体？

Answer 1

因为你正在使用jQuery尝试这些插件：

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

Answer 2

我们可以使用css：

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