javascript - 将文本限制为 x 行数并附加 '...'

Question

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

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

在这种情况下，将其限制为字符数或单词数是行不通的 - 我想每次都完全填充该 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