将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;仅适用于每个字母截断

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

  

此关键字值表示显示省略号（'...'，U + 2026   水平省略号）表示剪辑文本。省略号是   显示在内容区域内，减少文本量   显示。如果没有足够的空间来显示省略号，那就是   削波。