兼容firefox的断字功能

最新推荐文章于 2025-08-08 17:07:36 发布

Yoara

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量705

点赞数

分类专栏： Javascript 文章标签： firefox binding javascript constructor css function

Javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在Firefox浏览器中实现自动断字的方法，通过定义CSS类和使用XML绑定来触发JavaScript，使得文本能够在遇到长单词或URL时自动换行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不過要在 Firefox 中使用 word-wrap 就不可行了，一直到前天才正式發佈的 Firefox 3.0 也還是不支援 word-wrap 屬性，不過 word-wrap 屬性已經被編進 CSS 3.0 的規格中了，相信遲早有一天可以支援的。

不過在 Firefox 中也不是完全沒辦法，網路上有篇文章就有寫到如何在 Firefox 中實現自動斷字的方式，有興趣的可以上去看看。

我這裡摘要一下要達到目的必須的步驟：

1. 在 CSS 中定義一個 wordwrap 類別

.wordwrap
{
    word-wrap: break-word;
    -moz-binding: url('wordwrap.xml#wordwrap');
    display: block;
    overflow: auto;
}這幾行 CSS 定義都是有意義的，內容這四行我大致解釋一下：

第一行：給 IE 看的，讓斷字產生。

第二行：給 Firefox/Mozilla 看的，透過 binding 的方式執行一段 JavaScript，當 Element 套用此 wordwrap 類別時讀取 wordwrap.xml 檔案，裡面有定義一組JavaScript程式可動態執行。

第三行、第四行：wordwrap.xml 裡面定義當 overflow 事件發生時執行一段程式讓文字斷行，所以 display 屬性一定要設定成 block 才有可能引發 overflow 事件（使用 inline 是沒辦法的），而最後的 overflow 就設定成 auto 即可。

2. 新增一個 wordwrap.xml 檔案

<?xml version = "1.0"?>
<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
<binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[

            var elem = this;

            elem.addEventListener('overflow',
                function()
                {
                    var exp = /<//*[_/s="'/w]+>/g;

                    var txt = elem.innerHTML;
                    var chars = txt.split('');
                    var newTxt = chars.join('');
                    newTxt = newTxt.replace(exp, reconstructTag);
                    elem.innerHTML = newTxt;
                },false);

                function reconstructTag(_tag)
                {
                    return _tag.replace(//g, '');
                }

            //]]>
      </constructor>
    </implementation>
</binding>
</bindings>內容我就不詳述，請自行到 Emulating CSS word-wrap for Mozilla/Firefox 閱讀相關說明。