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

Question

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

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

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

</div>

但是，内容溢出了 DIV（如预期），因为“单词”太长。

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

Answer 1

使用

word-wrap:break-word;

它甚至可以在 IE6 中运行，这是一个惊喜。

---

word-wrap: break-word

已替换为

overflow-wrap: break-word;

，适用于所有现代浏览器。 IE 作为一个死浏览器，将永远依赖已弃用且非标准的

word-wrap

。

word-wrap

的现有用途今天仍然有效，因为根据规范它是

overflow-wrap

的别名。

Answer 2

我不确定浏览器兼容性

word-break: break-all;

您还可以使用

<wbr>

标签

<wbr>

（分词）的意思是：“浏览器 可以在此处插入换行符，如果 希望。”浏览器不认为 换行不需要任何东西 发生了。

Answer 3

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

来源：

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-writing-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;
}

Answer 4

我只是在谷歌上搜索同样的问题，并发布了我的最终解决方案这里。这也与这个问题有关。

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

Answer 5

​

是称为零宽度空格 (ZWSP) 的 unicode 字符的 HTML 实体，它是指定换行机会的不可见字符。同样，连字符的目的是指定单词边界内的换行机会。

Answer 6

发现在使用 Flexbox 并依赖于

width: auto

时，使用以下内容可以在大多数主要浏览器（Chrome、IE、Safari iOS/OSX）上运行，但 Firefox (v50.0.2) 除外。

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

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

另一件事需要注意的是使用

 

作为间距的文本可能会导致单词中间换行。

Answer 7

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

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

Answer 8

CSS

word-wrap:break-word;

，在 FireFox 3.6.3 中测试

Answer 9

删除

white-space: nowrap

，如果有的话。

实施：

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

Answer 10

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

display: table-caption;

Answer 11

来自MDN：

overflow-wrap

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

与

word-break

相比，

overflow-wrap

仅当整个单词无法放置在自己的行上而不溢出时才会创建中断。

所以你可以使用：

overflow-wrap: break-word;

我可以使用吗？

Answer 12

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

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

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

这样当文本达到元素宽度时，它就会被分解成行。

Answer 13

正如 @davidcondrey 的回复中提到的，不仅有 ZWSP，还有 SHY

­ ­

，可以用在很长的构造词中（想想德语或荷兰语），必须当场打破you想要就这样吧。 不可见，但它会在需要时给出连字符，从而最大限度地保持单词连接和行填充。

这样，单词 luchthavenpolitieagent 可能会被标记为

lucht­haven­politie­agent

，它给出的部分比单词的音节更长。
虽然我从未读过任何有关它的官方内容，但这些软连字符在浏览器中设法比构造的单个单词中的官方连字符获得更高的优先级（if它们有一些扩展）。
在实践中，没有任何浏览器能够自行打破如此长的构造单词；在较小的屏幕上，会产生一个新行，或者在某些情况下甚至是一个单字行（例如当其中两个构建的单词跟进时）。

仅供参考：荷兰语中机场警察的意思

Answer 14

word-break：normal似乎比word-break：break-word更好用，因为break-word会破坏诸如EN之类的首字母

word-break: normal

Answer 15

.word-break {
   word-break: keep-all;
   word-wrap: break-word;
}

Answer 16

我检查了 Chrome、Firefox：

word-wrap: break-word

、

overflow-wrap: break-word

对我不起作用。有效的是：

    overflow-wrap: anywhere;

或

    word-break: break-all;

Answer 17

为此，您可以使用网格系统。

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

Answer 18

这样做：

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

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

Answer 19

按照我们的风格尝试一下

white-space: normal;