クロスブラウザ互換の CSS テキストを省略記号で切り詰めるにはどうすればよいですか?

CSS を使用した長い文字列の切り詰め: ブラウザー固有の冒険

論理幅に基づいてサーバー側でテキストを切り詰めるだけで十分な場合もありますが、多くの場合、個々の文字の幅が異なるため、最適な結果が得られません。理想的には、レンダリングされるテキストの物理的な幅を正確に決定できるブラウザーで切り捨てが行われる必要があります。

Internet Explorer の text-overflow: ellipsis プロパティはこの目的を正確に達成しますが、ブラウザー間の互換性は制限されています。 Firefox ではこのプロパティがサポートされていないため、開発者は代替ソリューションを探しています。

Justin Maxwell のクロスブラウザ アプローチ

Justin Maxwell は、クロスブラウザをサポートする CSS ベースの回避策を提供しています。ブラウザの切り詰め。ただし、Firefox でテキスト選択ができないという注意点があります。

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

ellipsis.xml の内容

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding>

Firefox でのノード コンテンツの更新

Firefox のこれに対する処理の制限に対処するため

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

        pnode.replaceChild(newNode, node);
    }
}

これらの手法を使用すると、開発者は CSS を使用して長い文字列を効果的に切り詰めることができ、ユーザー フレンドリーを維持しながら動的コンテンツが固定幅のレイアウト内に収まるようにすることができます。切り捨てを示す楕円などの視覚的な手がかり。

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