如果我只是将word-break: break-all放在元素上，我经常会这样做：
大家好，我正在打电话给你 圣人太长了不适合！
显然，这会更好：
大家好，我正在打字 消息太长而不适合！
但同时如果有人写道：
BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH !!!!!!
然后我希望它是：
BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH !!!!!!
我似乎无法找到真正做到这一点的方法。
请注意，元素的宽度不固定，可能会发生变化。
答案 0 :(得分：34)
尝试word-break: break-word;它应该按照您的预期行事。
答案 1 :(得分：4)
对于我们的很多项目，我们通常会在必要时添加：
Imagick::ALPHACHANNEL_REMOVE它处理不同浏览器的大多数奇怪情况。
答案 2 :(得分：3)
对于智能分词符，或者首先更正单词分词，您需要依赖于语言的规则。对于英语和许多其他语言，正确的分解意味着连字符，并在发生中断时在行尾添加连字符。
在CSS中，您可以使用hyphens: auto，但您仍然需要使用供应商前缀复制它。由于这在IE 9上不起作用，您可以考虑使用基于JavaScript的连字符，例如Hyphenate.js。在这两种情况下，必须使用语言标记（lang属性）。
打破长而不可连字的字符串是一个不同的问题。它们最好在预处理中处理，但在一个简单的设置中，word-break: break-word（这意味着错误打破单词，例如英语）可能会被视为紧急情况。
答案 3 :(得分：1)
更新后的答案应为：
overflow-wrap:break-word;
这将打断一个单词，该单词本身无法适应自己的行，但保留所有其他单词不变（请参见溢出包装here）。
您还可以使用：
overflow-wrap:anywhere;，但这将允许在任何单词后换行，以减小元素的宽度。请参见下面与MDN所述的区别：
[break-word is]与Anywhere值相同，如果行中没有其他可接受的断点，则通常在任何点都可以破坏通常坚不可摧的单词，但是由break带来的软包装机会不是计算最小含量固有尺寸时要考虑的问题。
Internet Explorer，Safari和某些移动浏览器也不支持anywhere，而所有主要浏览器都支持break-word（请参见[here] [2]）。
word-break: break-word;不应再使用，因为不推荐使用{p> overflow-wrap:break-word;。现在，word-break属性旨在在您想打断单词时使用，无论它们是否适合自己的行（即，OP的第一个带有word-break: break-all的示例。
与分词相比，溢出包装只会在无法将整个单词放置在自己的行而不会溢出的情况下创建分词。
（通过溢出包装also linked above）