好吧，这真把我搞糊涂了。我在一个div里面有一些内容，就像这样:
<div style="background-color: green; width: 200px; height: 300px;">
Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.
</div>
但是，由于“word”太长，内容会溢出DIV(正如预期的那样)。
我怎么能迫使浏览器在必要的地方“打破”这个词，以适应里面的所有内容?
当前回答
为此，您可以使用网格系统。
<div class="container" style="background-color: green; width: 200px; height: 300px;">
<div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
<div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
</div>
其他回答
正如@davidcondrey在回复中提到的，不仅有ZWSP，还有SHY ­:可以用在非常长的、构造好的单词中(比如德语或荷兰语)，这些单词必须在你想要的地方被打断。 看不见，但它在需要的时候给了一个连字符，从而最大限度地保持单词连接和行填充。
That way the word luchthavenpolitieagent might be noted as lucht­haven­politie­agent which gives longer parts than the syllables of the word. Though I never read anything official about it, these soft hyphens manage to get higher priority in browsers than the official hyphens in the single words of the construct (if they have some extension for it at all). In practice, no browser is capable of breaking such a long, constructed word by itself; on smaller screens resulting in a new line for it, or in some cases even a one-word-line (like when two of those constructed words follow up).
供你参考:这是荷兰语，机场警察的意思
试试我们的风格
white-space: normal;
.word-break {
word-break: keep-all;
word-wrap: break-word;
}
这可以添加到“跨浏览器”解决方案的可接受答案中。
来源:
http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
.your_element{
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
中数:
overflow-wrap CSS属性指定浏览器是否应该在单词中插入换行符，以防止文本溢出其内容框。 与换行符相反，溢出自动换行只在整个单词不能被放置在自己的行上而不溢出时才会创建换行符。
所以你可以用:
overflow-wrap: break-word;
我能用吗?
