好吧，这真的让我很困惑。我在 div 中有一些内容，如下所示：
<div style="background-color: green; width: 200px; height: 300px;">
Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.
</div>
但是，由于“单词”太长，内容会溢出 DIV（如预期的那样）。
如何强制浏览器在必要的地方“打断”单词以适应其中的所有内容？
【问题讨论】：
&shy; 用连字符分隔单词。
标签： html css line-breaks
它甚至可以在 IE6 中运行，这是一个惊喜。
word-wrap: break-word 已被替换为overflow-wrap: break-word;，它适用于所有现代浏览器。 IE，作为一个死的浏览器，将永远依赖已弃用和非标准的word-wrap。
word-wrap 的现有用途今天仍然有效，因为根据规范，它是 overflow-wrap 的别名。
【讨论】：
table-layout: fixed; 应用于表格
word-wrap: break-word 对我不起作用，但 @rahul 在下面建议的 word-break: break-word 有效。
overflow-wrap: anywhere 在表中为我工作，但不确定其他所有内容是否与想要的相同
我不确定浏览器的兼容性
word-break: break-all;
你也可以使用<wbr>标签
<wbr>（分词）表示：“浏览器 可以在这里插入换行符，如果它 愿望。”浏览器不认为 没有必要换行 发生。
【讨论】：
这可以添加到“跨浏览器”解决方案的已接受答案中。
来源：
.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;
}
【讨论】：
我只是在谷歌上搜索同样的问题，并发布了我的最终解决方案HERE。这也与这个问题有关。
您可以通过将样式设置为word-wrap: break-word 来使用 div 轻松完成此操作（您可能还需要设置其宽度）。
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。这意味着列宽不再是可变的，而是仅基于第一行中列的宽度（或通过指定的宽度）定义。 Read more here.
示例代码：
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 */
}
【讨论】：
width: 100%; 是让我在 FF 和 chrome 上工作的唯一方法！
&#8203; 是称为零宽度空格 (ZWSP) 的 Unicode 字符的 HTML 实体，它是一个不可见的字符，它指定换行机会。同样，连字符的目的是在单词边界内指定换行机会。
【讨论】：
&#8203; 的优先级低于空白（即，如果附近有一个，则该行将改为在空白中换行）。
<wbr/> unicode 等价物
发现在使用 flexbox 并依赖 width: auto 时，除 Firefox (v50.0.2) 之外的大多数主要浏览器（Chrome、IE、Safari iOS/OSX）都可以使用以下内容。
.your_element {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
注意：如果您不使用自动前缀，您可能需要添加浏览器供应商前缀。
需要注意的另一件事是使用&nbsp; 作为间距的文本可能会导致单词中间换行。
【讨论】：
空白由浏览器保留。文本将在必要时换行，并在换行符处
.pre-wrap {
white-space: pre-wrap;
word-break: break-word;
}
演示
td {
word-break: break-word;
white-space: pre-wrap;
-moz-white-space: pre-wrap;
}
table {
width: 100px;
border: 1px solid black;
display: block;
}<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>【讨论】：
CSS word-wrap:break-word;，在 FireFox 3.6.3 中测试
【讨论】：
删除white-space: nowrap，如果有的话。
实施：
white-space: inherit;
word-break: break-word;
【讨论】：
我用下面的代码解决了我的问题。
display: table-caption;
【讨论】：
首先您应该确定元素的宽度。例如：
#sampleDiv{
width: 80%;
word-wrap:break-word;
}<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>这样当文本达到元素宽度时，会被分解成行。
【讨论】：
正如@davidcondrey 的回复中提到的，不仅有 ZWSP，还有 SHY &#173; &shy;，可以用于很长的构造词（想想德语或荷兰语），必须当场打破 您希望它成为。
不可见，但它会在需要的时候给出一个连字符，从而最大限度地保持单词连接和行填充。
这样，luchthavenpolitieagent 这个词可能会被标注为 lucht&shy;haven&shy;politie&shy;agent，它给出的部分比这个词的音节要长。
虽然我从来没有读过任何关于它的官方信息，但这些软连字符在浏览器中的优先级高于结构中单个单词中的官方连字符（如果它们有一些扩展名完全没有）。
实际上，没有浏览器能够自行破解这么长的构造词；在较小的屏幕上会产生一个新的行，或者在某些情况下甚至是一个单词行（例如当其中两个构造单词跟随时）。
仅供参考：机场警察是荷兰语
【讨论】：
word-break: normal 似乎比 word-break: break-word 更好用，因为 break-word 会破坏首字母，例如 EN
word-break: normal
【讨论】：
您可以为此使用网格系统。
<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>
【讨论】：
这样做：
<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
#sampleDiv{
overflow-wrap: break-word;
}
【讨论】：
按照我们的风格试试这个
white-space: normal;
【讨论】：
normal 是默认的 white-space 值。我认为添加它对问题中的示例没有影响。如果我错了，请纠正我。