【问题标题】:How to force a line break in a long word in a DIV?如何在 DIV 中的长单词中强制换行?
【发布时间】:2011-03-04 18:50:24
【问题描述】:

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

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

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

</div>

但是,由于“单词”太长,内容会溢出 DIV(如预期的那样)。

如何强制浏览器在必要的地方“打断”单词以适应其中的所有内容?

【问题讨论】:

标签: html css line-breaks


【解决方案1】:

使用word-wrap:break-word;

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


word-wrap: break-word 已被替换为overflow-wrap: break-word;,它适用于所有现代浏览器。 IE,作为一个死的浏览器,将永远依赖已弃用和非标准的word-wrap

word-wrap 的现有用途今天仍然有效,因为根据规范,它是 overflow-wrap 的别名。

【讨论】:

  • 其实word-wrap是IE的发明。所以毫不奇怪它在 IE 中工作:)
  • 要在表格中使用此功能,您可能需要将table-layout: fixed; 应用于表格
  • word-wrap: break-word 对我不起作用,但 @rahul 在下面建议的 word-break: break-word 有效。
  • 注意:只有在 IE 中的父 div 中提供它才有效(而不是 div 内的内部跨度)。
  • @Yves 或 overflow-wrap: anywhere 在表中为我工作,但不确定其他所有内容是否与想要的相同
【解决方案2】:

我不确定浏览器的兼容性

word-break: break-all;

你也可以使用&lt;wbr&gt;标签

&lt;wbr&gt;(分词)表示:“浏览器 可以在这里插入换行符,如果它 愿望。”浏览器不认为 没有必要换行 发生。

【讨论】:

  • 请注意分词:break-all;如果它仍然可以将任何字符与之前的其他单词放在一行中,则会在中间打断单词,这可能不是理想的结果,而 word-wrap: break-word;将单词移动到新行,并且仅在单词太长而无法完全放入容器中自己的行时才中断单词。示例:jsfiddle.net/4AKhn/1
  • break-all 破坏一切。可以与仅具有长 URL 等的特定类一起使用,但不能与 BODY 或 P 一起使用
  • 当您尝试在日志表格单元格中显示请求 URI 之类的内容时,这绝对是完全(并且理想)可以接受的,并且需要它来停止用一个巨大的长单元格破坏整个表格。需要在“单词”中间打断;)虽然在这方面接受的答案并没有蹲下。
  • @Skelly1983 没有 IE12 之类的东西
  • @TylerH 我知道这一点,感谢您在 3 年后向我指出这一点。这在 wbr 标签的 w3schools 浏览器支持图表中列出,其中将支持列为“Internet Explorer/Edge”,版本号列为 12.0,这实际上是 Edge 的第一个版本。
【解决方案3】:

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

来源:

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

【讨论】:

  • 我在 Chrome/Opera 和 Safari 上得到了它,但在 Firefox 和 IE 上仍然没有得到它。有了这个我解决了 Firefox,但 IE 仍在检查容器(我的文件名很长,只有字母数字字符)。
  • 嗨,Kamafeather,我不确定,但如果您尝试破坏的文件名,整个上下文(浏览器、html-css 代码)可能有助于进一步帮助您。也许,您可以针对您的情况提出另一个问题。
  • 请注意,这会在不合语法的地方打断单词。
  • @user1322720 什么是“不合语法”的地方?
  • 这似乎是最好的答案。不需要时不要断句。
【解决方案4】:

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

您可以通过将样式设置为word-wrap: break-word 来使用 div 轻松完成此操作(您可能还需要设置其宽度)。

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 */
}

【讨论】:

  • 感谢您提供表格解决方案;)但是,我不太明白为什么断词不能与自动布局一起使用。有什么建议吗?
  • @ondObno 是的,我不确定技术原因,但有几个浏览器似乎是这样的。也许是因为超长的单词会影响确定每列宽度所需的所有计算。
  • 设置 width: 100%; 是让我在 FF 和 chrome 上工作的唯一方法!
【解决方案5】:

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

【讨论】:

  • 非常好的提示!只是为了补充:&amp;#8203; 的优先级低于空白(即,如果附近有一个,则该行将改为在空白中换行)。
  • 似乎是我正在寻找的 &lt;wbr/&gt; unicode 等价物
【解决方案6】:

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

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

需要注意的另一件事是使用&amp;nbsp; 作为间距的文本可能会导致单词中间换行。

【讨论】:

  • 这正是我所需要的。其他解决方案不适用于宽度:100%。需要注意的一点: word-break: break-word; 应该是 word-break: break-all;
【解决方案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>

【讨论】:

    【解决方案8】:

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

    【讨论】:

      【解决方案9】:

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

      实施:

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

      【讨论】:

        【解决方案10】:

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

        display: table-caption;
        

        【讨论】:

          【解决方案11】:

          来自MDN

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

          word-break 相比,overflow-wrap 只会在整个单词不能放在自己的行上而不溢出的情况下才会创建中断。

          所以你可以使用:

          overflow-wrap: break-word;
          

          Can I use?

          【讨论】:

            【解决方案12】:

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

            #sampleDiv{
              width: 80%;
              word-wrap:break-word;
            }
            &lt;div id="sampleDiv"&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/div&gt;

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

            【讨论】:

              【解决方案13】:

              正如@davidcondrey 的回复中提到的,不仅有 ZWSP,还有 SHY &amp;#173; &amp;shy;,可以用于很长的构造词(想想德语或荷兰语),必须当场打破 希望它成为。 不可见,但它会在需要的时候给出一个连字符,从而最大限度地保持单词连接和行填充。

              这样,luchthavenpolitieagent 这个词可能会被标注为 lucht&amp;shy;haven&amp;shy;politie&amp;shy;agent,它给出的部分比这个词的音节要长。
              虽然我从来没有读过任何关于它的官方信息,但这些软连字符在浏览器中的优先级高于结构中单个单词中的官方连字符(如果它们有一些扩展名完全没有)。
              实际上,没有浏览器能够自行破解这么长的构造词;在较小的屏幕上会产生一个新的行,或者在某些情况下甚至是一个单词行(例如当其中两个构造单词跟随时)。

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

              【讨论】:

                【解决方案14】:

                word-break: normal 似乎比 word-break: break-word 更好用,因为 break-word 会破坏首字母,例如 EN

                word-break: normal
                

                【讨论】:

                  【解决方案15】:

                  您可以为此使用网格系统

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

                  【讨论】:

                    【解决方案16】:

                    这样做:

                    <div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
                    
                    #sampleDiv{
                       overflow-wrap: break-word;
                    }
                    

                    【讨论】:

                      【解决方案17】:

                      按照我们的风格试试这个

                      white-space: normal;
                      

                      【讨论】:

                      • 大多数的情况下,重复多个问题的答案是不受欢迎的。在这种情况下,这两个问题的答案似乎都是错误的。 normal 是默认的 white-space 值。我认为添加它对问题中的示例没有影响。如果我错了,请纠正我。
                      • 这取决于 CSS 所做的覆盖。就我而言,我不得不在我的 JSF 组件中的“样式”上重新声明它,以覆盖不是“空白:正常;”的默认 CSS 样式
                      猜你喜欢
                      • 2020-09-20
                      • 2014-10-27
                      • 1970-01-01
                      • 2010-12-10
                      • 2013-05-27
                      • 2015-05-13
                      • 1970-01-01
                      • 1970-01-01
                      相关资源
                      最近更新 更多