如何使CSS插入没有空格的换行符？答案

【问题标题】：How to make CSS insert line breaks without white space?如何使CSS插入没有空格的换行符？
【发布时间】：2014-03-14 01:41:28
【问题描述】：

我在尝试使用一些 CSS 方面需要帮助。我正在使用 Chrome 进行测试，但我需要一个不是特定于浏览器的解决方案。

我有一个页面分为两个 iframe：左侧的窄版包含目录，右侧的宽版显示所选页面。我想在左侧框架的底部显示所选页面的 URL。如果它太长而不适合框架（通常是这样），它应该换行到第二行，并且第一行应该向上移动，以便最后一行保持底部对齐。

目录 iframe 中的页面结构如下所示：

<body>
   <div>
      <script...> <!--JavaScript that generates the table of contents--> </script>
   </div>
   <div id='showPageUrl' style="height:auto;position:absolute;bottom:0"></div>
   <script...> showURL(document.URL) </script>
</body>

以下函数由加载页面的 JavaScript 代码（来自 onclick 事件）以及加载初始页面的 HTML（如上）执行。

   function showUrl(url) {
      var sel = document.getElementById('showPageUrl');
      if (sel!==null) {
         sel.innerHTML = url;
      }
   }

问题：如果 URL 太长而无法容纳在一行中，则它不会换行，因为它不包含要换行的空白字符。相反，框架会出现一个水平滚动条。如果我用一段包含空格的文本替换 URL，文本会在空格字符处中断并正确显示。

我一直在寻找一个 CSS 属性来使 URL 在任何需要的地方中断，但我找不到任何东西。所有的换行控件似乎假定有空格并改变渲染引擎处理它的方式。

我必须怎么做才能使 URL（没有空格）在行尾正确中断？

【问题讨论】：

标签： css whitespace line-breaks

【解决方案1】：

您正在寻找overflow-wrap CSS 属性（旧版word-wrap）：

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

文档：http://www.w3.org/TR/css3-text/#overflow-wrap

浏览器支持：http://caniuse.com/#search=overflow-wrap

演示：http://jsfiddle.net/aueL3/2/

【讨论】：

在任何地方破坏 URL 不是正确破坏。例如，在连字符后断开是错误的。
@JukkaK.Korpela 这不是破坏 URL，而是改变 URL 的显示。锚标签的href 不会被破坏。
更改显示意味着在视觉上破坏它，就像在显示中拆分一个单词意味着破坏它。
@JukkaK.Korpela 公平点。那么也许正确的答案是使用text-overflow: ellipsis;？这将是视觉上的首选方法，但 OP 已要求将其拆分为多行。
@JukkaK.Korpela：虽然这在理论上可能是正确的，但不影响页面布局是一种妥协。 URL 不是“正常”的词，尤其是它们通常很长，因此不适合给定的容器宽度。在大多数情况下，出于显示目的“打破”它们是可以的，恕我直言。

【解决方案2】：

#showPageUrl { word-break: break-all; }

供参考：http://www.w3schools.com/cssref/css3_pr_word-break.asp

【讨论】：

【解决方案3】：

这并不是真正的 CSS 问题。要指定允许直接断点，可以使用<wbr> 标记或零宽度空格字符&#x200b;。你需要决定打破的原则；有各种标准和做法可以破坏 URL。

首先，不要将 URL 放入文本内容中。它们应该出现在属性中，例如href。

【讨论】：

【解决方案4】：

您可以使用此 CSS 在任何超出父级宽度的地方断开 URL。

这是 CSS：

.text {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

white-space 和 word-wrap 代码取自 How do I wrap text with no whitespace inside a <td>?

最后，一个 JSFiddle：Demo