JavaScript を使用せずに Firefox でテキスト オーバーフロー省略記号を実現するにはどうすればよいですか?

Firefox での省略記号のサポート: 旅と解決策

テキスト オーバーフローは、切り詰められたテキストを効率的に表示するための重要な CSS プロパティです。多くのブラウザが「text-overflow: ellipsis」を実装していますが、Firefox はまだこれに追随していません。

長年にわたり、-moz-binding 機能を利用したハッキン​​グにより、Firefox 3 で省略記号を表示できるようになりました。しかし、Firefox 4 でこの機能が削除されたため、このハックは廃止されました。

次のような疑問が生じます: JavaScript に頼らない代替ソリューションはありますか?

JavaScript は実行可能なオプションを提供しますが、より望ましいアプローチは、ネイティブ CSS ソリューションを見つけることです。残念ながら、Firefox 5 以前のリリースは引き続きサポートが不足しています。

しかし、希望は見えてきます。 Firefoxの「Aurora Channel」に省略記号機能が追加された。これは、Firefox 7 が 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 中国語 Web サイトの他の関連記事を参照してください。