如何使用 CSS 截斷長字串並在瀏覽器中顯示省略號？

使用 CSS 截斷長字串：跨瀏覽器解決方案

截斷動態文字以適應固定佈局可能是一個挑戰。沒有本機 CSS 屬性提供截斷文字和顯示省略號的跨瀏覽器支援。然而，創造性的解決方法可以實現此功能。

Justin Maxwell 的省略技術

Justin Maxwell 開發了一種跨瀏覽器工作的CSS 解決方案，但它有一個限制：不允許在Firefox 中選擇文字.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml 檔案包含實作省略號功能的 XBL 標記。

更新節點內容

在 Firefox 中，使用 innerHTML 更新節點內容可能會破壞省略號功能。要解決此問題，請使用以下程式碼：

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    // Check for the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
}

注意： 文字溢位：現在 Firefox 7 原生支援省略號。此更新是一項值得歡迎的改進，但交叉瀏覽器 CSS 解決方案對於舊版瀏覽器仍然是有用的參考。

以上是如何使用 CSS 截斷長字串並在瀏覽器中顯示省略號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！