CSS で長い文字列を切り詰め、ブラウザ間で省略記号を表示するにはどうすればよいですか?

CSS を使用した長い文字列の切り詰め: クロスブラウザー ソリューション

固定レイアウト内に収まるように動的テキストを切り詰めるのは難しい場合があります。ネイティブ CSS プロパティは、テキストの切り捨てと省略記号の表示に対するクロスブラウザーのサポートを提供しません。ただし、創造的な回避策でこの機能を実現できます。

Justin Maxwell の省略記号テクニック

Justin Maxwell はブラウザ間で機能する CSS ソリューションを開発しましたが、それには 1 つの制限があります。 Firefox ではテキスト選択を許可しません。

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml ファイルには、省略記号機能を実装する XBL マークアップ。

ノード コンテンツの更新

Firefox では、innerHTML を使用してノードのコンテンツを更新すると、省略記号機能が壊れる可能性があります。これに対処するには、次のコードを使用します。

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    // Check for the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
}

注: Text-overflow: ellipsis は Firefox 7 でネイティブにサポートされるようになりました。このアップデートは歓迎すべき改善ですが、クロスブラウザーの CSS ソリューションは、古いブラウザーにとっても有益なリファレンスです。

以上がCSS で長い文字列を切り詰め、ブラウザ間で省略記号を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。