文字溢出省略號在 Firefox 中如何運作，有哪些解決方法？

文字溢位：Firefox 4（和FF5）的省略號：綜合指南

在Web 開發領域，文字- Overflow:ellipsis CSS屬性證明了Microsoft 的遠見。此屬性允許文字溢出元素的邊界，並用省略號 (...) 指示符截斷。

不幸的是，Firefox 在支援 text-overflow:ellipsis 方面落後於其他瀏覽器。 Firefox 開發者多年來一直在爭論這個問題，但實作仍然難以捉摸。

-moz-binding Hack 的消亡

曾幾何時，Firefox 3 使用者可以使用 -moz-binding 功能進行駭客攻擊來啟用省略號支援。然而，該解決方案在 Firefox 4 中刪除了 -moz-binding 後遇到了障礙。

JavaScript 作為最後的手段

開發人員可以考慮使用 JavaScript 作為後備。 jQuery 提供了一個簡單的截斷文字的解決方案：

var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
    var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4);
    trimmedText += ellipsis;
    $('#limitedWidthTextBox').val(trimmedText);
}

更優雅的方法

要獲得更簡潔的解決方案，請將CSS 類別（例如，fixWidth）附加到元素具有固定寬度。然後，使用JavaScript 處理該類別的所有元素的截斷：

$(document).ready(function() {
    $('.fixWidth').each(function() {
        var limit = 50;
        var ellipsis = "...";
        var text = $(this).val();
        if (text.length > limit) {
            var trimmedText = text.substring(0, limit - 4);
            trimmedText += ellipsis;
            $(this).val(trimmedText);
        }
    });
});

Firefox 的救贖

最後，經過多年的期待，Firefox Aurora 加入了省略號支持，為其在Firefox 7 中的發布鋪平了道路。這項期待已久的功能使 Firefox 達到了與其他瀏覽器相同的水平瀏覽器，為開發人員提供省略號截斷的本機解決方案。

以上是文字溢出省略號在 Firefox 中如何運作，有哪些解決方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！