好吧，这真把我搞糊涂了。我在一个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>
其他回答
中数:
overflow-wrap CSS属性指定浏览器是否应该在单词中插入换行符，以防止文本溢出其内容框。 与换行符相反，溢出自动换行只在整个单词不能被放置在自己的行上而不溢出时才会创建换行符。
所以你可以用:
overflow-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;
}
使用自动换行:break-word;
它甚至可以在IE6中工作，这是一个令人惊喜的惊喜。
Word-wrap: break-word已替换为overflow-wrap: break-word;它适用于所有现代浏览器。IE作为一个已死的浏览器，将永远依赖已弃用的非标准换行。
目前word-wrap的现有用法仍然适用，因为它是规范中溢换的别名。
空白由浏览器保留。文本将在必要时自动换行，并在换行时自动换行
.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 > 表> < /
我不确定浏览器的兼容性
word-break: break-all;
你也可以使用<wbr>标签
<wbr>(换字)表示:“浏览器 可以在这里插入换行符吗 愿望。”浏览器不会思考 换行没有必要 发生了。
