如何在没有 JavaScript 的情况下在 Firefox 中实现文本溢出省略？

Firefox 中的省略号支持：旅程和解决方案

文本溢出是有效显示截断文本的关键 CSS 属性。虽然许多浏览器已经实现了“文本溢出：省略号”，但 Firefox 尚未效仿。

多年来，利用 -moz-bound 功能的黑客攻击使 Firefox 3 能够显示省略号。然而，随着 Firefox 4 中删除了此功能，该 hack 就变得过时了。

问题出现了：是否有不诉诸 JavaScript 的替代解决方案？

虽然 JavaScript 提供了一个可行的选项，更理想的方法是找到原生 CSS 解决方案。不幸的是，Firefox 5 及更早版本仍然缺乏支持。

但是，希望就在眼前。省略号功能已添加到 Firefox 的“Aurora Channel”中。这表明它很可能会作为 Firefox 7 的一部分发布，为这个问题提供期待已久的解决方案。

在正式发布之前，JavaScript 仍然是一个替代选项。利用 jQuery，可以实现一个简单的脚本：

var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
   // -4 to include the ellipsis size and also since it is an index
   var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4); 
   trimmedText += ellipsis;
   $('#limitedWidthTextBox').val(trimmedText);
}

此外，将 CSS 类附加到具有固定宽度的元素可以更轻松地进行 JavaScript 操作：

$(document).ready(function() {
   $('.fixWidth').each(function() {
      var limit = 50;
      var ellipsis = "...";
      var text = $(this).val();
      if (text.length > limit) {
         // -4 to include the ellipsis size and also since it is an index
         var trimmedText = text.substring(0, limit - 4); 
         trimmedText += ellipsis;
         $(this).val(trimmedText);
      }
   });
});//EOF

随着 Firefox 的不断发展，随着不断发展，对“text-overflow：ellipsis”原生支持的需求肯定会增长。随着 Firefox 7 的加入，这个期待已久的功能终于满足了开发者和用户的期望。

以上是如何在没有 JavaScript 的情况下在 Firefox 中实现文本溢出省略？的详细内容。更多信息请关注PHP中文网其他相关文章！