好吧，这真把我搞糊涂了。我在一个div里面有一些内容，就像这样:
<div style="background-color: green; width: 200px; height: 300px;">
Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.
</div>
但是，由于“word”太长，内容会溢出DIV(正如预期的那样)。
我怎么能迫使浏览器在必要的地方“打破”这个词，以适应里面的所有内容?
当前回答
中数:
overflow-wrap CSS属性指定浏览器是否应该在单词中插入换行符，以防止文本溢出其内容框。 与换行符相反，溢出自动换行只在整个单词不能被放置在自己的行上而不溢出时才会创建换行符。
所以你可以用:
overflow-wrap: break-word;
我能用吗?
其他回答
用word-break: normal似乎比用word-break: break-word更好，因为break-word会打断EN这样的首字母
word-break: normal
& # 8203;是unicode字符的HTML实体，称为零宽度空格(ZWSP)，它是一个不可见的字符，指定换行机会。类似地，连字符的作用是在单词边界内指定换行机会。
我刚刚在谷歌上搜索了同样的问题，并在这里发布了我的最终解决方案。这也和这个问题有关。
您可以通过赋予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 */
}
中数:
overflow-wrap CSS属性指定浏览器是否应该在单词中插入换行符，以防止文本溢出其内容框。 与换行符相反，溢出自动换行只在整个单词不能被放置在自己的行上而不溢出时才会创建换行符。
所以你可以用:
overflow-wrap: break-word;
我能用吗?
我不确定浏览器的兼容性
word-break: break-all;
你也可以使用<wbr>标签
<wbr>(换字)表示:“浏览器 可以在这里插入换行符吗 愿望。”浏览器不会思考 换行没有必要 发生了。
