如何在 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> 标签

（分词）意思是：“如果浏览器愿意，可以在这里插入一个换行符。”如果浏览器认为不需要换行，则什么也不会发生。

---

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

资料来源：

http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

http://css-tricks.com/snippets/css/prevent-long-urls-from-break-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;
}

---

我只是在谷歌上搜索同样的问题，并发布了我的最终解决方案 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 */
}

---

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

---

发现在使用 flexbox 并依赖 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;
}

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

需要注意的另一件事是使用   作为间距的文本可能会导致换行符出现在单词中间。

---

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

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

演示

td { 断字：断字；空白：预包装； -moz-white-space：预包装； } 表格 { 宽度：100px;边框：1px纯黑色；显示：块； }

list	1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext 2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline

---

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

---

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

实施：

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

---

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

display: table-caption;

---

从 MDN：

overflow-wrap CSS 属性指定浏览器是否应在单词中插入换行符以防止文本溢出其内容框。与 word-break 相比，overflow-wrap 只会在整个单词不能放在它自己的行上而不溢出的情况下才会创建一个 break。

所以你可以使用：

overflow-wrap: break-word;

Can I use？

---

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

#sampleDiv{ 宽度：80%;自动换行：断词； }

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

---

正如@davidcondrey 的回复中提到的，不仅有 ZWSP，还有 SHY ­ ­，可以用很长的构造词（想想德语或荷兰语），必须当场打破 you< /strong> 希望如此。不可见，但它会在需要时给出连字符，从而最大限度地保持单词连接和行填充。

这样，luchthavenpolitieagent 这个词可能会被记为 lucht­haven­politie­agent，它给出的部分比这个词的音节长。
虽然我从未读过任何关于它的官方消息，但这些软连字符设法获得更高的优先级在浏览器中，而不是在构造的单个单词中的官方连字符（if 他们有一些扩展名）。
实际上，没有浏览器能够自己打破了这么长的，构造的词；在较小的屏幕上会产生一个新的行，或者在某些情况下甚至是一个单词行（例如当其中两个构造单词跟随时）。

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

---