如何在DIV中强行换行？

好吧，这真的让我感到困惑。我在div中有一些内容，例如：

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

但是，由于“单词”太长，内容溢出了DIV（如预期的那样）。

如何在必要时强制浏览器“破坏”单词以适合其中的所有内容？

采用 word-wrap:break-word;

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

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

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

我不确定浏览器的兼容性

word-break: break-all;

您也可以使用<wbr>标签

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

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

资料来源：

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

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

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

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

发现在使用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;
}

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

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

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

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

display: table-caption;

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

实行：

white-space: inherit;
word-break: 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>

从MDN：

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

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

因此，您可以使用：

overflow-wrap: break-word;

我可以使用吗？

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

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

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

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

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

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

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

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

word-break: normal

做这个：

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

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

只是尝试我们的风格

white-space: normal;