如何在DIV中强行换行？

只是尝试我们的风格

white-space: normal;

做这个：

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

断字：正常使用似乎比断字：断字更好，因为断字会打乱诸如EN之类的首字母

word-break: normal

正如@ davidcondrey的答复中提到，有不只是ZWSP，还害羞的­ ­，可以在很长的使用，构建字（德国认为荷兰或）有当场被打破，你希望它是。不可见，但是它在需要时提供连字符，从而使单词始终保持连接和线条填充。

这样，单词luchthavenpolitieagent可能会被注释为lucht­haven­politie­agent比单词的音节更长的部分。
尽管我从没看过任何正式的连字符，但是在结构的单个单词中，这些软连字符设法在浏览器中比正式连字符具有更高的优先级（如果它们有扩展名的话）。
实际上，没有浏览器能够自行破解如此长的构造单词。在较小的屏幕上会产生一个新行，或者在某些情况下甚至会变成一个单词行（例如，当其中两个构造单词跟随时）。

仅供参考：机场警察是荷兰人

首先，您应该确定元素的宽度。例如：

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

这样当文本达到元素宽度时，它将被分解为几行。

从MDN：

该overflow-wrapCSS属性指定是否在浏览器应该字中插入换行符，以防止文本溢出其内容框。

与相比word-break，overflow-wrap仅当无法将整个单词放在自己的行而不溢出的情况下，才会产生中断。

因此，您可以使用：

overflow-wrap: break-word;

我可以使用吗？

空白由浏览器保留。文本将在必要时自动换行，并在换行符上

.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>

删除white-space: nowrap（如果有）。

实行：

white-space: inherit;
word-break: break-word;

我用下面的代码解决了我的问题。

display: table-caption;

CSS word-wrap:break-word;，在FireFox 3.6.3中测试

发现在使用flexbox并依赖时，使用Firefox可以在除Firefox（v50.0.2）之外的大多数主要浏览器（Chrome，IE，Safari iOS / OSX）上使用width: auto。

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

注意：如果不使用自动前缀，则可能需要添加浏览器供应商前缀。

要注意的另一件事是 用于空格的文本可能会导致中间单词断行。

​是称为零宽度空格（ZWSP）的Unicode字符的HTML实体，该字符为不可见字符，用于指定换行符。同样，连字符的目的是在单词边界内指定换行符。

我只是在搜索相同的问题，然后在此处发布我的最终解决方案。这也与这个问题有关。

您可以通过给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 */
}

可以将其添加到“跨浏览器”解决方案的公认答案中。

资料来源：

• 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;
}

我不确定浏览器的兼容性

word-break: break-all;

您也可以使用<wbr>标签

<wbr>（断字）表示：“浏览器可以根据需要在此处插入换行符。” 如果浏览器认为没有换行符，则什么也不会发生。

采用 word-wrap:break-word;

它甚至可以在IE6中使用，这真是令人惊喜。

word-wrap: break-word已被替换为overflow-wrap: break-word;可在每种现代浏览器中使用。IE，一个已经失效的浏览器，将永远依赖不推荐使用的和非标准的浏览器word-wrap。

word-wrap今天，它的现有用法仍然有效，因为它是overflow-wrap该规范的别名。