javascript - 将 p 标签值限制为一行并在最后一个完整单词后中断

Question

我限制了<p>使用以下代码标记到一行

<div style="width:100px;height:20px;background:lightgrey">
<p style="white-space: nowrap;text-overflow: ellipsis;width:100%;overflow:hidden">hello this string is a long string hello this is a long string hello this is a long string hello this is a long string hello this is a long string </p>
</div>

我面临的问题是，样式在单词中间切断了标签内容。例如上面显示为:

hello this string i...

我希望它在完整的单词后剪切，即

hello this string is..

我怎样才能做到这一点？

这fiddle显示我当前的尝试。

Answer 1

你应该检查jquery.autoellipsis library

text-overflow: ellipsis; 仅对每个字母 chop 有效

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

This keyword value indicates to display an ellipsis ('…', U+2026 Horizontal Ellipsis) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.