好吧，这真把我搞糊涂了。我在一个div里面有一些内容，就像这样:
<div style="background-color: green; width: 200px; height: 300px;">
Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.
</div>
但是，由于“word”太长，内容会溢出DIV(正如预期的那样)。
我怎么能迫使浏览器在必要的地方“打破”这个词，以适应里面的所有内容?
当前回答
我刚刚在谷歌上搜索了同样的问题，并在这里发布了我的最终解决方案。这也和这个问题有关。
您可以通过赋予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 */
}
其他回答
使用自动换行:break-word;
它甚至可以在IE6中工作，这是一个令人惊喜的惊喜。
Word-wrap: break-word已替换为overflow-wrap: break-word;它适用于所有现代浏览器。IE作为一个已死的浏览器，将永远依赖已弃用的非标准换行。
目前word-wrap的现有用法仍然适用，因为它是规范中溢换的别名。
中数:
overflow-wrap CSS属性指定浏览器是否应该在单词中插入换行符，以防止文本溢出其内容框。 与换行符相反，溢出自动换行只在整个单词不能被放置在自己的行上而不溢出时才会创建换行符。
所以你可以用:
overflow-wrap: break-word;
我能用吗?
为此，您可以使用网格系统。
<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>
试试我们的风格
white-space: normal;
这可以添加到“跨浏览器”解决方案的可接受答案中。
来源:
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;
}
