如何防止长话破坏我的div？

Question

自从从TABLE布局切换到DIV布局以来,一个常见的问题仍然存在:

问题:你用动态文本填充你的DIV,并且不可避免地有一个超长的单词延伸到div列的边缘并使你的网站看起来不专业.

RETRO-WHINING:表格布局从未发生过这种情况.表格单元格总是很好地扩展到最长单词的宽度.

严重性:即使是最主要的网站,我也会看到这个问题,特别是在德国网站上,即使是"速度限制"等常用词也很长("Geschwindigkeitsbegrenzung").

有没有人有这个可行的解决方案？

Answer 1

软连字符

您可以通过插入soft hyphen(­)告诉浏览器在哪里拆分长字:

averyvery­longword

可以呈现为

averyverylongword

要么

averyvery-
长字

一个好的正则表达式可以确保你不会插入它们,除非必要:

/([^\s-]{5})([^\s-]{5})/ ? $1­$2

浏览器和搜索引擎足够聪明,可以在搜索文本时忽略此字符,Chrome和Firefox(未测试其他人)在将文本复制到剪贴板时忽略它.

<wbr> 元件

另一种选择是注入<wbr>一个以前的IE-ism,现在是HTML5:

averyvery<wbr>longword

断点没有连字符:

非常
长的话

您可以使用零宽度空格字符​(或&#x200B)来实现相同的效果.

仅供参考,最新的IE,Firefox和Safari支持CSShyphens: auto(但目前不支持Chrome):

div.breaking {
  hyphens: auto;
}

然而,该连字符基于连字词典,并且不能保证打破长词.它可以使合理的文本更漂亮.

复古的抱怨解决方案

<table>对于布局是不好的,但display:table在其他元素上是好的.它将像老式的桌子一样古怪(和有弹性):

div.breaking {
   display: table-cell;
}

overflow和white-space: pre-wrap下面的答案也很好.

Answer 2

两个修复:

1. overflow:scroll - 这确保您的内容可以以设计为代价(滚动条很难看)
2. overflow:hidden - 只是切断任何溢出.这意味着人们无法阅读内容.

如果(在SO示例中)你想要阻止它与填充重叠,你可能必须在填充内创建另一个div来保存你的内容.

编辑:正如其他答案所述,有多种截断单词的方法,就是在客户端计算渲染宽度(永远不要尝试执行此服务器端,因为它永远不会可靠地工作,跨平台) JS和插入中断字符,或使用非标准和/或非常不兼容的CSS标记(word-wrap: break-word 似乎在Firefox中不起作用).

但是,您总是需要溢出描述符.如果你的div包含另一个太宽的块类型的内容(图像,表格等),你需要溢出才能使它不破坏布局/设计.

因此,无论如何都要使用其他方法(或它们的组合),但请记住添加溢出,以便覆盖所有浏览器.

编辑2(以解决下面的评论):

开始使用CSS overflow属性并不完美,但它会阻止设计破解.overflow:hidden先申请.请记住,溢出可能不会在填充上破坏,因此要么嵌套,div要么使用边框(任何最适合您的边框).

这将隐藏溢出的内容,因此您可能会失去意义.您可以使用滚动条(使用overflow:auto或overflow:scroll代替overflow:hidden),但根据div的尺寸和您的设计,这可能看起来不太好或者效果不佳.

为了解决这个问题,我们可以使用JS来回退并进行某种形式的自动截断.我在为你编写一些伪代码的过程中,但是在中途变得非常复杂.如果您需要尽可能多地显示,请查看连字符(如下所述).

请注意,这是以用户的CPU为代价的.这可能导致页面花费很长时间来加载和/或调整大小.

Answer 3

正如我们所知,这是一个复杂的问题,浏览器之间的任何常见方式都不支持.大多数浏览器根本不支持此功能.

在使用HTML电子邮件完成的一些工作中,使用了用户内容,但是脚本不可用(甚至CSS也不受支持),在你的非空格内容块的包装中,下面的CSS应该至少有所帮助:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

对于基于Mozilla的浏览器,上面提到的XBL文件包含:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

遗憾的是,Opera 8+似乎不喜欢上述任何解决方案,因此JavaScript必须是这些浏览器的解决方案(如Mozilla/Firefox).另一种跨浏览器解决方案(JavaScript)包括Opera的更高版本将使用Hedger Wang的脚本:http: //www.hedgerwow.com/360/dhtml/css-word-break.html

其他有用的链接/想法:

不兼容的Babble»博客存档»为Mozilla/Firefox模拟CSS自动换行
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU]在Opera中没有自动换行,在IE浏览器中显示正常
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-用户/ 2004年11月/ 024468.html

Answer 4

CSS跨浏览器Word Wrap

.word_wrap
{
    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+ */
}

Answer 5

使用风格word-break:break-all;.我知道它适用于桌子.

Answer 6

你的意思是,在支持它的浏览器中,它word-wrap: break-word不起作用？

如果包含在样式表的正文定义中,它应该适用于整个文档.

如果溢出不是一个好的解决方案,只有自定义的javascript可以人为地分解长字.

注意:还有这个<wbr>Word Break标记.这为浏览器提供了一个可以分割线的位置.不幸的是,<wbr>标签不适用于所有浏览器,只有Firefox和Internet Explorer(以及带有CSS技巧的Opera).

Answer 7

刚刚检查了IE 7,Firefox 3.6.8 Mac,Firefox 3.6.8 Windows和Safari:

word-wrap: break-word;

适用于具有设置宽度的div内的长链接,并且在css中没有声明溢出:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

我没有看到任何不兼容问题

Answer 8

我只是发现了连字符从这个问题.这可能会解决问题.

Answer 9

经过多次战斗,这对我有用:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

适用于最新版本的Chrome,Firefox和Opera.

请注意,我排除white-space了其他人建议的许多属性 - 这实际上打破了pre我的缩进.

Answer 10

对于我没有固定大小和动态内容的div,它使用:

display:table;
word-break:break-all;