Javascript 将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 is..

我怎样才能做到这一点

这显示了我当前的尝试。

您应该检查一下

文本溢出：省略号仅适用于每字母截断


此关键字值指示显示省略号（“…”，U+2026
水平省略号）表示剪裁的文本。省略号是
显示在内容区域内，减少文本量
显示。如果没有足够的空间显示省略号，则为空
剪短了

这可能会有帮助吗？你不能用纯CSS。
hello this string is..