如何在DIV中的loooooong单词中强制换行？

Question

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

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

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

</div>

但是，内容溢出了DIV（如预期的那样），因为'word'太长了。

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

Answer 1

使用[word-break: break-word;]

Answer 2

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

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

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

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

Answer 3

来自MDN：

overflow-wrap CSS属性指定浏览器是否应在单词中插入换行符以防止文本溢出其内容框。

与word-break相反，overflow-wrap只会在整个单词无法放置在自己的行上而不会溢出的情况下创建一个中断。

所以你可以使用：

overflow-wrap: break-word;

Can I use？

Answer 4

空格由浏览器保留。文本将在必要时和换行符时换行

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

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>

Answer 5

做这个：

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

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

Answer 6

试试我们的风格

white-space: normal;

Answer 7

我不确定浏览器的兼容性

word-break: break-all;

您也可以使用<wbr>标签

<wbr>（分词）表示：“如果愿意，浏览器可以在这里插入换行符。”它浏览器不认为必要的换行没有任何反应。

Answer 8

这可以添加到“跨浏览器”解决方案的已接受答案中。

资料来源：

• 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/

 CSS

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

Answer 9

我只是谷歌搜索相同的问题，并发布了我的最终解决方案HERE。它也与这个问题有关，所以我希望你不介意重新发布。

您可以使用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。这意味着列宽不再是流体，而是仅基于第一行中列的宽度（或通过指定的宽度）定义。 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 */
}

希望能帮到别人。

Answer 10

​是称为零宽度空间（ZWSP）的unicode字符的HTML实体，它是一个不可见的字符，用于指定换行机会。类似地，连字符的目的是在单词边界内指定换行机会。

Answer 11

发现当使用flex-box并依赖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;
}

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

需要注意的另一件事是使用 进行间距的文本可能导致中间的换行符。

Answer 12

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

Answer 13

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

display: table-caption;

Answer 14

删除white-space: nowrap，如果有的话。

实行：

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