好吧，这真把我搞糊涂了。我在一个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 > 表> < /
其他回答
当使用flexbox并依赖于宽度时，发现使用以下功能在大多数主流浏览器(Chrome, IE, Safari iOS/OSX)上都有效，除了Firefox (v50.0.2):
.your_element {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
注意:如果你不使用自动修复器，你可能需要添加浏览器厂商前缀。
另一件需要注意的事情是使用 因为空格会在中间导致换行。
使用自动换行:break-word;
它甚至可以在IE6中工作，这是一个令人惊喜的惊喜。
Word-wrap: break-word已替换为overflow-wrap: break-word;它适用于所有现代浏览器。IE作为一个已死的浏览器，将永远依赖已弃用的非标准换行。
目前word-wrap的现有用法仍然适用，因为它是规范中溢换的别名。
我用下面的代码解决了这个问题。
display: table-caption;
我不确定浏览器的兼容性
word-break: break-all;
你也可以使用<wbr>标签
<wbr>(换字)表示:“浏览器 可以在这里插入换行符吗 愿望。”浏览器不会思考 换行没有必要 发生了。
CSS换行:break-word;，在FireFox 3.6.3中测试
