Firefox でのテキスト オーバーフロー省略記号はどのように機能しますか?またその回避策は何ですか?

Firefox 4 (および FF5) の text-overflow:ellipsis: 総合ガイド

Web 開発の世界では、テキスト - overflow:ellipsis CSS プロパティは、Microsoft の先見性の証です。このプロパティにより、テキストが要素の境界を越えて省略記号 (...) インジケーターで切り詰められるようになります。

残念ながら、Firefox は text-overflow:ellipsis のサポートにおいて他のブラウザーに遅れをとっています。 Firefox 開発者はこの問題について何年も議論してきましたが、実装は依然として困難です。

-moz-binding ハックの終焉

かつて、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 中国語 Web サイトの他の関連記事を参照してください。