如何跨浏览器使用连续字符的换行

作者:blank 来源:怿飞blog 时间:2008-07-06 23:10:00 

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

那如何解决这个问题呢?

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

标签:浏览器,换行,字符,Firefox
0
投稿

猜你喜欢

  • python基于queue和threading实现多线程下载实例

    2023-02-04 09:58:22
  • python复制文件的方法实例详解

    2021-12-22 11:43:45
  • MyEclipse连接Mysql数据库的方法(一)

    2024-01-23 11:31:29
  • python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例

    2022-12-24 23:49:30
  • Python深入学习之闭包

    2022-11-09 05:27:48
  • 使用 JSON 进行数据传输

    2008-06-15 07:12:00
  • Python 使用双重循环打印图形菱形操作

    2021-07-16 14:13:47
  • Python3使用PySynth制作音乐的方法

    2021-03-18 19:41:01
  • Python提取PDF指定内容并生成新文件

    2022-11-09 19:44:00
  • Python实现的微信公众号群发图片与文本消息功能实例详解

    2023-02-04 07:43:48
  • 如何通过python画loss曲线的方法

    2021-01-04 09:01:18
  • Python下opencv使用hough变换检测直线与圆

    2021-04-20 20:15:53
  • Python决策树和随机森林算法实例详解

    2021-12-15 21:44:24
  • 十个Python程序员易犯的错误

    2023-11-27 03:43:13
  • python 实现按对象传值

    2023-05-26 14:20:18
  • Python cookbook(数据结构与算法)让字典保持有序的方法

    2022-04-28 03:28:04
  • python随机数分布random测试

    2022-01-05 00:41:17
  • 设计良好网页的4项原则

    2009-04-24 12:48:00
  • JavaScript数值千分位格式化的两种简单实现方法

    2023-08-31 22:59:43
  • Python中的wordcloud库安装问题及解决方法

    2022-04-14 21:38:43
  • asp之家 网络编程 m.aspxhome.com