[解決済み】CSSで長い文字列を切り捨てる：まだ実現可能か？

質問

プレーンなHTMLとCSSでテキストを切り捨てて、動的なコンテンツを固定幅・高さのレイアウトに収める良い方法はないでしょうか？

今までサーバーサイドで切り捨てるのは 論理的 しかし、'w' は 'i' よりも幅が広いので、これは最適とは言えない傾向があり、また、固定幅ごとに文字数を推測し、調整し続けなければなりません。 理想的には、切り捨てはブラウザで行われ、ブラウザは 物理的 レンダリングテキストの幅

私は、IEが text-overflow: ellipsis プロパティは、まさに私が望むことを実現してくれますが、クロスブラウザである必要があります。 このプロパティは は、(ある程度？)標準的なようです。 が、Firefoxではサポートされていません。 私が見つけたのは いろいろ 回避策 に基づいています。 overflow: hidden しかし、それらは省略記号を表示しないか（コンテンツが切り捨てられたことをユーザーに知らせたい）、または常に表示します（コンテンツが切り捨てられなかったとしても）。

あるいは、サーバーサイドで論理的な幅で切り捨てるのが、今のところ一番良い方法なのでしょうか？

解決方法は？

更新してください。 text-overflow: ellipsis がサポートされました。 Firefox 7 (2011年9月27日リリース) より。やったー 私の最初の回答は、歴史的な記録として以下の通りです。

Justin Maxwellは、クロスブラウザCSSソリューションを提供しています。しかし、Firefoxではテキストを選択できないという欠点があります。チェックアウト マット・スナイダー氏のブログへのゲスト投稿 をご覧ください。

このテクニックは、JavaScript で innerHTML プロパティを使用します。回避策については、この記事の最後を参照してください。

CSS

.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 id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

ノードの内容を更新する

Firefoxで動作する方法でノードの内容を更新するには、以下を使用します。

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

参照 Matt Sniderの投稿に、この仕組みの説明があります。 .