如何在不使用 CSS word-break 属性的情况下阻止文本跑出屏幕并破坏布局？

Posted 2023-03-05

【中文标题】如何在不使用 CSS word-break 属性的情况下阻止文本跑出屏幕并破坏布局？

【英文标题】：How do I stop text running off screen and breaking layout without using CSS word-break property?

【发布时间】：2014-12-09 11:20:51

【问题描述】：

我的网站上有一个评论部分，如果用户按下并按住如下键：

“啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊”

评论离开屏幕并脱离布局。解决办法是这样的：

.comment 
    word-break: break-all;

但不幸的是，这会破坏所有 cmets，甚至像这样的普通 cmets：

I just came here to say tha
t the quick brown fox jumped ov
er the lazy dog.

如何解决第一个问题而不引起第二个问题？

【参考方案1】：

使用

 word-wrap: break-word;

css

.breaking    
    width:500px;
    word-wrap: break-word;

http://jsfiddle.net/nbafbacL/