如何在沒有 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中文網其他相關文章！