将文本限制为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