212

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

私はサーバー側を論理的な幅（つまり、盲目的に推測される文字数）で切り捨ててきましたが、「w」は「i」よりも幅が広いため、これは最適ではない傾向があり、再推測する必要もあります（固定幅ごとの文字数を微調整し続けます。理想的には、切り捨ては、レンダリングされたテキストの物理的な幅を認識しているブラウザで発生します。

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

動的テキストを固定レイアウトに合わせる良い方法を持っている人はいますか、それとも論理幅によるサーバー側の切り捨ては、今のところ得られるものと同じくらい良いですか？

4

5 に答える 5

189

更新： Firefox 7（2011年9月27日リリース）からtext-overflow: ellipsisサポートされるようになりました。わーい！私の最初の答えは歴史的記録として続きます。

Justin Maxwellには、クロスブラウザCSSソリューションがあります。ただし、Firefoxでテキストを選択できないという欠点があります。これがどのように機能するかについての完全な詳細については、MattSniderのブログの彼のゲスト投稿をチェックしてください。

この手法ではinnerHTML、Firefoxのプロパティを使用してJavaScriptでノードのコンテンツを更新することもできなくなります。回避策については、この投稿の最後を参照してください。

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);
    }
};

これがどのように機能するかの説明については、MattSniderの投稿を参照してください。

于 2009-07-09T03:27:03.677 に答える
46

2014年3月：CSSを使用した長い文字列の切り捨て：ブラウザーのサポートに焦点を当てた新しい回答

http://jsbin.com/leyukama/1/のデモ（古いバージョンのIEをサポートしているためjsbinを使用しています）。

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

-ms-text-overflow CSSプロパティは必要ありません。これはtext-overflowCSSプロパティの同義語ですが、6から11までのバージョンのIEはすでにtext-overflowCSSプロパティをサポートしています。

Windows OS、Webブラウザーで（Browserstack.comで）正常にテストされました。

  • IE6からIE11
  • Opera 10.6、Opera 11.1、Opera 15.0、Opera 20.0
  • Chrome 14、Chrome 20、Chrome 25
  • Safari 4.0、Safari 5.0、Safari 5.1
  • Firefox 7.0、Firefox 15

Firefox：Simon Lieschkeが指摘したように（別の回答で）、FirefoxはFirefox 7以降（2011年9月27日リリース）のテキストオーバーフローCSSプロパティのみをサポートします。

Firefox3.0とFirefox6.0でこの動作を再確認しました（テキストオーバーフローはサポートされていません）。

MacOSWebブラウザでさらにテストする必要があります。

注：省略記号が適用されているときにマウスホバーにツールチップを表示したい場合があります。これはJavaScriptを介して実行できます。次の質問を参照してください：HTMLテキストオーバーフロー省略記号の検出とHTML-省略記号がアクティブになっている場合にのみツールチップを表示するにはどうすればよいですか

資力：

于 2014-04-02T12:32:20.147 に答える
19

JavaScriptソリューションに問題がない場合は、クロスブラウザー方式でこれを行うためのjQueryプラグインがあります。http：//azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-forを参照してください。 -firefox-via-jquery /

于 2009-04-29T12:45:04.173 に答える
7

OK、Firefox7text-overflow: ellipsisも実装されていtext-overflow: "string"ます。最終リリースは2011年9月27日に予定されています。

于 2011-07-09T16:10:52.337 に答える
6

この問題の別の解決策は、次の一連のCSSルールである可能性があります。

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

上記のCSSの唯一の欠点は、テキストがコンテナをオーバーフローするかどうかに関係なく、「...」が追加されることです。それでも、要素がたくさんあり、コンテンツがオーバーフローすることが確実な場合は、これはより単純なルールのセットになります。

私の2セント。ジャスティン・マクスウェルによるオリジナルのテクニックに敬意を表する

于 2010-04-09T23:59:04.793 に答える