好吧，这真把我搞糊涂了。我在一个div里面有一些内容，就像这样:
<div style="background-color: green; width: 200px; height: 300px;">
Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.
</div>
但是，由于“word”太长，内容会溢出DIV(正如预期的那样)。
我怎么能迫使浏览器在必要的地方“打破”这个词，以适应里面的所有内容?
当前回答
空白由浏览器保留。文本将在必要时自动换行，并在换行时自动换行
.pre-wrap {
white-space: pre-wrap;
word-break: break-word;
}
DEMO
td { 单词分割:break-word; 空白:pre-wrap; -moz-white-space: pre-wrap; ｝ 表{ 宽度:100 px; 边框:1px纯黑色; 显示:块; ｝ <表> < tr > < th > < / th >列表 < td > 1. longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext 2. breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline < / td > < / tr > 表> < /
其他回答
正如@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).
供你参考:这是荷兰语，机场警察的意思
我刚刚在谷歌上搜索了同样的问题，并在这里发布了我的最终解决方案。这也和这个问题有关。
您可以通过赋予div样式word-wrap: break-word轻松地做到这一点(您可能还需要设置它的宽度)。
div {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
width: 100%;
}
然而，对于表，你还需要应用:table-layout: fixed。这意味着列的宽度不再是流动的，而是仅根据第一行中的列的宽度(或通过指定的宽度)定义。点击这里阅读更多。
示例代码:
table {
table-layout: fixed;
width: 100%;
}
table td {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}
用word-break: normal似乎比用word-break: break-word更好，因为break-word会打断EN这样的首字母
word-break: normal
使用自动换行:break-word;
它甚至可以在IE6中工作，这是一个令人惊喜的惊喜。
Word-wrap: break-word已替换为overflow-wrap: break-word;它适用于所有现代浏览器。IE作为一个已死的浏览器，将永远依赖已弃用的非标准换行。
目前word-wrap的现有用法仍然适用，因为它是规范中溢换的别名。
为此，您可以使用网格系统。
<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>
