文本溢出省略号：避免单词分隔 [英] text overflow ellipsis: avoid word break

问题描述

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

In my webpage I have a div with fixed width and using the following css:

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

省略号正在工作，问题是它削减了最后一个词，

The ellipsis is working, the problem is that it cuts the final word, and I wanted it to put the ellipsis (...) in the final of a full word.

例如，如果我有文本：stackoverflow是最好的，如果需要我想要显示stackoverflow is the ...而不是stackoverflow is the be ...

For instance, if I have the text: "stackoverflow is the best", and if it need to be cutted near the end, I want it to display "stackoverflow is the ..." instead of "stackoverflow is the be..."

推荐答案

恐怕这是不可能的。有一次 text-overflow：ellipsis-word ，它只是这样做，但它没有在浏览器中实现，并且从CSS3草稿中删除。

I’m afraid it’s impossible. There was once text-overflow: ellipsis-word, which would do just this, but it was not implemented in browsers and it was removed from CSS3 drafts.

这篇关于文本溢出省略号：避免单词分隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！