web-dev-qa-db-ja.com

CSSで長い文字列を切り捨てる：まだ可能ですか？

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

サーバー側をlogical幅（つまり、盲目的に推測された文字数）で切り捨てましたが、「w」は'i'これは最適ではない傾向があり、固定幅ごとに文字数を再推測（および調整）する必要があります。理想的には、ブラウザーで切り捨てが行われ、レンダリングされたテキストのphysical幅が認識されます。

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

動的レイアウトを固定レイアウトに収める良い方法はありますか、それとも論理幅によるサーバー側の切り捨ては今のところ得られるものですか？

csstextlayoutcross-browsertruncate
208
Sam Stokes

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

Justin Maxwellには、クロスブラウザCSSソリューションがあります。ただし、Firefoxでテキストを選択できないという欠点があります。 Matt Sniderのブログへのゲスト投稿 で、この仕組みの詳細を確認してください。

この手法では、FirefoxのinnerHTMLプロパティを使用して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);
    }
};

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

186
Simon Lieschke

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-overflow CSSプロパティの同義語ですが、6〜11のIEのバージョンは既にtext-overflow CSSプロパティをサポートしています。

Webブラウザ用のWindows OSで（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プロパティのみをサポートします。

Firefox 3.0およびFirefox 6.0でこの動作を再確認しました（テキストオーバーフローはサポートされていません）。

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

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

リソース：

44
Adrien Be

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

19
RichieHindle

OK、Firefox 7はtext-overflow: Ellipsisとtext-overflow: "string"を実装しました。最終リリースは2011-09-27に予定されています。

7
j.j.

この問題の別の解決策は、次のCSSルールセットです。

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

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

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

私の2セント。ジャスティン・マックスウェルによるオリジナルのテクニックに嫌気がさしている

6
Rajat

参考までに、「バグ」追跡へのリンクを次に示します text-overflow：FirefoxでのEllipsisサポート 。 Firefoxのようなサウンドは、ネイティブCSSソリューションをサポートしない唯一の主要なブラウザです。

1
Sam Stokes