css - 文本溢出省略号 : avoid word break

Question

在我的网页中，我有一个固定宽度的 div 并使用以下 css:

width: 200px; 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

省略号有效，问题是它截断了最后一个词，我希望它能将省略号 (...) 放在一个完整单词的末尾。

例如，如果我有文本:“stackoverflow is the best”，如果它需要在接近尾声时被剪切，我希望它显示“stackoverflow is the ...”而不是“stackoverflow is the be ……”

Answer 1

这恐怕是不可能的。曾经有 text-overflow: ellipsis-word 可以做到这一点，但它没有在浏览器中实现，并且已从 CSS3 草稿中删除。