如何實現跨瀏覽器相容的CSS文字省略號截斷？-css教學-PHP中文網

如何實現跨瀏覽器相容的CSS文字省略號截斷？

Linda Hamilton

發布： 2024-12-24 17:38:10

原創

886 人瀏覽過

How Can I Achieve Cross-Browser Compatible CSS Text Truncation with Ellipses?

使用CSS 截斷長字串：瀏覽器特定的奧德賽

雖然根據邏輯寬度截斷伺服器端文字可能就足夠了，但通常情況下由於各個字元的寬度不同，導致結果不理想。理想情況下，截斷應該發生在瀏覽器中，這樣可以準確地確定渲染文字的物理寬度。

Internet Explorer 的 text-overflow: ellipsis 屬性精確地實現了這一目標，但其跨瀏覽器相容性有限。 Firefox 缺乏對此屬性的支持，導致開發人員尋找替代解決方案。

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 內容

<?xml version="1.0"?>
<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; // detect gecko browser if (YAHOO.env.ua.gecko) { var pnode = node.parentNode, newNode = node.cloneNode(true); pnode.replaceChild(newNode, node); } }

透過這些技術，開發人員可以使用CSS 有效截斷長字串，確保動態內容適合固定寬度的佈局，同時保持用戶友善的視覺提示像省略號一樣表示截斷。

以上是如何實現跨瀏覽器相容的CSS文字省略號截斷？的詳細內容。更多資訊請關注PHP中文網其他相關文章！