关于html：如何在DIV中的loooooong单词中强制换行？


How to force a line break in a loooooong word in a DIV?

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

1
Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

但是，由于"单词"太长，内容溢出了DIV(如预期的那样)。

如何在必要时强制浏览器"破坏"单词以适合内部所有内容？

相关讨论

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

相关讨论

我不确定浏览器的兼容性

1
word-break: break-all;

您也可以使用标签

(word break) means:"The browser
may insert a line break here, if it
wishes." It the browser does not think
a line break necessary nothing
happens.

相关讨论

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

资料来源：

的CSS

1
2
3
4
5
6
7
8
9
10
11
12
.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，您可以轻松地做到这一点(并且您可能还需要设置其宽度)。

1
2
3
4
5
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。这意味着列的宽度不再是固定的，而是仅基于第一行中列的宽度(或通过指定的宽度)定义。在这里阅读更多。

样例代码：

1
2
3
4
5
6
7
8
9
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实体，该字符为不可见字符，用于指定换行符。同样，连字符的目的是在单词边界内指定换行符。

相关讨论

发现使用flex-box并依赖width: auto时，除Firefox(v50.0.2)以外，大多数主流浏览器(Chrome，IE，Safari iOS / OSX)使用以下命令都有效。

1
2
3
4
5
.your_element {
    word-wrap: break-word;  
    overflow-wrap: break-word;
    word-break: break-word;
}

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

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

相关讨论

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

相关讨论

删除white-space: nowrap(如果有)。

实行：

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

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

1
display: table-caption;
相关讨论

从MDN：

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

因此，您可以使用：

1
overflow-wrap: break-word;

我可以用吗？

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

1
2
3
4
5
6
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

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

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

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

1
2
3
4
.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

演示

1
2
3
4
5
6
7
8
9
10
11
td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}
1
2
3
4
5
6
7
8
<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

做这个：

1
2
3
4
5
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

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

只是尝试我们的风格

1
white-space: normal;
相关讨论