Question

我需要帮助我尝试使用一些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（没有空格）？

Answer 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

DEMO：http://jsfiddle.net/aueL3/2/

Answer 2

你可以使用这个css来破坏超出父母宽度的网址。

这是css：

.text {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    white-space: pre-wrap; /* css-3 */    
    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+ */
}

最后，小提琴：Demo

相关问题：SO Question

Answer 3

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

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

Answer 4

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

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

Answer 5

零宽度空格字符对于文本来说是完美的，但是网址可能会被复制，当粘贴时，空间就会在那里打破它们。由于它是隐形的，人们不会理解什么是错的，并且会认为网址不起作用。由于对wbr的支持不是通用的，对于类似的问题，我将URL拆分为两个标记为display：inline-block的跨度。它们像一个看不见的空间一样分裂，不会弄乱副本。粘贴（在html或空格中避免空格或换行符很重要）。

heroku run rake db:migrate

*我知道这个太旧了，不能对原作者有用，但可以帮助其他人寻找同样的事情

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

5 个答案: