文本溢出省略号在 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中文网其他相关文章！