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

Question

我正在寻找一种 Javascript/jQuery + CSS 方法来将文本（例如产品名称）限制为2 行。但访问者需要知道它已被截断，因此我需要在末尾附加“...”。

我想这样做的最初方法是将文本放在 1 行中，测量它的宽度并在文本达到包含 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 */
}