Question

我有一个div，所有长词（没有空格）都在div之外。

请不要将问题标记为How to prevent long text from flowing out of a container或Long words are flowing out of the box - How to prevent?的副本，其中问题已通过word-wrap: break-word;解决。

word-wrap: break-word;的缺点是它还会破坏位于div边缘的短词，从而破坏文本的流动。我希望简短的话语保持原样，只能打破冗长的话语。有可能实现这个吗？其他网站如何处理它？</ p>

Answer 1

它还会打破位于div边缘的短字

这不是真的...... word-wrap: break-word;不应该这样做也许你会把它与word-break: break-all;属性混淆（这在所有浏览器中都不起作用）。

请参阅此jsfiddle进行比较： http://jsfiddle.net/Snu8B/3/

对于firefox，您可以尝试hyphens属性。

Answer 2

如果您愿意“隐藏”可以使用overflow：hidden

播放的单词

.mydiv {
   height  : youchoose;
   width   : youchoose;
   overflow: hidden;
}

否则：

word-wrap : normal|break-word;
normal    : Break words only at allowed break points
break-word: Allows unbreakable words to be broken

word-break: normal|break-all|hyphenate;
normal    : Breaks non-CJK scripts according to their own rules
break-all : Lines may break between any two characters for non-CJK scripts
hyphenate : Words may be broken at an appropriate hyphenation point

防止长单词流出Div而不使用CSS break-word

2 个答案: