如何用CSS高效截斷長字串並處理跨瀏覽器相容性？

使用CSS 截斷長字串：卓越成就

使用HTML 和CSS 截斷文字可能是一個難題，尤其是在處理其內部呈現時固定佈局。基於邏輯寬度的伺服器端截斷有其局限性，通常需要不斷調整才能確保最佳結果。

然而，CSS text-overflow: ellipsis 的出現徹底改變了這個過程。此屬性現已受到主要瀏覽器的支持，它會截斷溢出的文字並附加省略號以指示截斷。

Justin Maxwell 精心設計了一個利用上述屬性的跨瀏覽器 CSS 解決方案。雖然它會阻止 Firefox 中的文字選擇，但它可以有效地修剪內容並根據需要顯示省略號。

CSS 實作：

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

用於 Firefox 支援的 XML綁定:

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding>

節點內容更新Firefox：

更新Firefox 中使用省略號的節點內容需要不同的方法：

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);
        pnode.replaceChild(newNode, node);
    }
}

有了這個增強的解決方案，截斷固定佈局中的動態文字不再是一項艱鉅的任務。文字溢出：省略號為簡化內容呈現鋪平了道路，消除了伺服器端猜測的需要並確保了跨瀏覽器相容性。

以上是如何用CSS高效截斷長字串並處理跨瀏覽器相容性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！