由于连续的字符(字母、符号、数字)在默认情况下是不换行的,可能会破坏整个界面布局。

那如何解决这个问题呢?

在 IE 和 Safari 1.3+ 下相对比较容易解决,使用 CSS 属性 word-wrap: break-word;。有朋友会问为什么不是使用 word-break:break-all; ,因为有一个特殊的情况,该属性无法解决换行——连续的英文标点符号。

注:word-break 主要使用在 CJK 文本,即:中文(Chinese)、日文(Japanese)、韩文(Korean)。

而 Firefox 和 Opera 浏览器,无法识别 word-wrap: break-word; 和 word-break:break-all; 属性。可以通过脚本给连续字符的每个字符之间插入 \ u8203 的字符(该字符在非 IE 浏览下不占据空间),使连续变为了不连续,达到了换行的效果。

breakWord = function(dEl){
    var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
    var node,s,c = String.fromCharCode('8203');
    while (dWalker.nextNode()){
        node = dWalker.currentNode;
        s = trim( node.nodeValue ) .split('').join(c);
        node.nodeValue = s;
    }
    return true;
}

详细的脚本,可参看 Hedger Wang 整理的脚本《Cross Browser Word Breaker》

对于 Firefox ,你还可以通过 XBL bindings 来实现此效果:《Emulating CSS word-wrap for Mozilla/Firefox》



共有18 条评论

  1. 1. 头像 怿飞

    对于不太重要的内容,连续字符在FF和Opera情况也可考虑直接隐藏掉。

  2. 2. 头像 怿飞

    对于提到的 XBL bindings ,也可以看类似的实现:《firefox通过XUL实现text-overflow:ellipsis的效果》

  3. 3. 头像 MacJi

    居然你自己做沙发了。。。

  4. 4. 头像 Lunatic Sun

    如果不嫌麻烦,也可以使用soft hyphen。

  5. 5. 头像 Zehee

    我觉得其实不用“给连续字符的每个字符之间插入 \ u8203 的字符”只要插入的间距<=容器的宽度 就好。否则这么循环一下还真是占资源。

  6. 6. 头像 winson

    it is so great!

  7. 7. 头像 宗羲

    http://www.diigo.com/user/om19bao/wbr

  8. 8. 头像 宗羲

    wbr标签据说也靠谱~
    股沟就是这么干滴~

  9. 9. 头像 无烟

    IE8 下如何使连续长字段自动换行 呵呵!标准何为标准!烦!谢了!

  10. 10. 头像 脚本爱好者

    我倒觉得这个不是 web前端应该做的事情,我们要做的就是数据的忠实输出。。

  11. 11. 如何跨浏览器使用连续字符的换行 | 负罪者

    […] 来自:怿飞 最近就遇到了在页面连续输入英文字符不换行的问题,怎么都不能很彻底的解决,看怿飞的博客总是能解决问题!原文如下: […]

  12. 12. 嗰個人·徽 » Blog Archive » word-wrap, word-break, white-space, text-overflow 的區別和用法

    […] 一些相關的文章: 《css之自动换行》 《如何跨浏览器使用连续字符的换行》 《连续字符自动换行的解决方案》 Tags: […]

  13. 13. 头像 moondy

    原本用的一个是设定了每行的字符个数然后加换行符,但英文本身就有字符宽度不同的问题。怿飞的这个要好一些。但有没有能根据容器宽度来加的呢?每个字符都循环的确有点占资源咯

  14. 14. PureCSS » Blog Archive » 兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行

    […] word-wrap:break-word; 兼容性不够广,所以我们使用的是 word-break:break-all;。(网上有一篇文章:《如何跨浏览器使用连续字符的换行》结论与之相反!) […]

  15. 15. 嗰個人·徽 » Blog Archive » word-wrap, word-break, white-space, text-overflow 的區別和用法

    […] 《如何跨浏览器使用连续字符的换行》 […]

  16. 16. 几条经典的 CSS Tips

    […] 上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论,参看圆心的记录)。 […]

  17. 17. 头像 circle

    把文本用div框起来,
    设定宽度,。设定word-wrap,word-break
    这样做起来比较省力

  18. 18. 怎样让超出部分换行 - 开发者问答

    […] 推荐你看这片文章 http://www.planabc.net/2008/07/03/cross_browser_word_breaker/ 本条目发布于 2009 年 6 月 26 日。属于 web前端 分类,被贴了 web前端 […]

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签