Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    text-overflow

    概要

    text-overflow CSS プロパティは、テキストが表示領域をオーバーフローしていることを、ユーザに知らせる方法を決めます。クリップするか、省略記号 ('…'、U+2026…) を表示するか、ウェブ著作者の定義した文字を表示させることができます。

    text-overflow.png

    クリップはボックスのボーダーで発生します; 文字を境目にしてクリップするには、空文字を使えます('')。

    このプロパティは、ブロックコンテナ要素からインラインの進行方向にオーバーフローしたコンテンツだけに作用します(例えば、ボックス下部のオーバーフローには作用しません)。テキストは、折り返しが禁止されている場合(例: ‘white-space:nowrap’ のとき)や、1つの単語が長すぎて入らないとき、オーバーフローすることができます。

    この CSS プロパティはオーバーフローを強制するものではありません; オーバーフローを強制し、text-overflow を適用するためには、著作者は要素に追加のプロパティを使う必要があります(例えば overflowhidden にするなど)。

    • 初期値 clip
    • 適用対象 ブロックコンテナ要素
    • 継承 継承しない
    • メディア visual
    • 計算値 指定値
    • アニメーションの可否 不可
    • 正規順序 形式文法で定義される一意のあいまいでない順序

    構文

    形式文法: [ clip | ellipsis | <string> ]{1,2}
    /* 1 値構文: 行末の(ltr なら右端、rtl なら左端)オーバーフロー処理を指定します */
    text-overflow: clip
    text-overflow: ellipsis
    text-overflow: "…"
    
    /* 2 値構文: 1 つ目の値は行の左端での、2つ目の値は右端でのオーバーフロー処理を指定します。
                        文章の方向は関係しません */
    
    text-overflow: clip ellipsis
    text-overflow: "…" "…"
    
    text-overflow: inherit

    clip
    デフォルトの値です。コンテンツ領域でテキストを切り取ります。したがって文字の真ん中で切り取るかもしれません。文字と文字の間で切り取るには、空の文字列値('') を使わねばなりません。
    ellipsis
    切り取られたテキストの代わりに、省略記号 (ellipses) … (U+2026 、 &hellip;) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、クリップされます。
    <string>
    クリップされたテキストを表すために使われる <文字列> です。この文字列はコンテンツ領域内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、クリップされます。

    p {
      white-space: nowrap;
      width: 100%;                   /* IE6 では width の指定が必要 */
      overflow: hidden;              /* "overflow" の値は "visible" 以外のものを指定する */ 
    
      -o-text-overflow: ellipsis;    /* Opera 9-10 */
      text-overflow:    ellipsis;    /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
    }
    
    
    CSS 値 direction: ltr direction: rtl
    期待される結果 実際の結果 期待される結果 実際の結果
    visible overflow 1234567890
    1234567890
    0987654321
    1234567890
    text-overflow: clip t-o_clip.png
    123456
    t-o_clip_rtl.png
    1234567890
    text-overflow: '' 12345
    123456
    54321
    1234567890
    text-overflow: ellipsis 1234…
    1234567890
    …4321
    1234567890
    text-overflow: '.' 1234.
    1234567890
    .4321
    1234567890
    text-overflow: clip clip 123456
    1234567890
    654321
    1234567890
    text-overflow: clip ellipsis 1234…
    1234567890
    6543…
    1234567890
    text-overflow: clip '.' 1234.
    1234567890
    6543.
    1234567890
    text-overflow: ellipsis clip …3456
    1234567890
    …4321
    1234567890
    text-overflow: ellipsis ellipsis …34…
    1234567890
    …43…
    1234567890
    text-overflow: ellipsis '.' …34.
    1234567890
    …43.
    1234567890
    text-overflow: ',' clip ,3456
    1234567890
    ,4321
    1234567890
    text-overflow: ',' ellipsis ,34…
    1234567890
    ,43…
    1234567890
    text-overflow: ',' '.' ,34.
    1234567890
    ,53.
    1234567890

    仕様

    仕様書 策定状況 コメント
    CSS Basic User Interface Module Level 3 草案  

    このインタフェースの以前のバージョンは勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があって、仕様は "草案" レベルに降ろされました。こうした経緯により、勧告候補にないこのプロパティが、プレフィックスなしでブラウザに実装されました。

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート 1.0 (312.3) 7.0 (7.0) (See notes) 6.0 (See notes) 9-o (See notes)
    11.0
    1.3 (312.3)
    2 値構文 未サポート 9.0 (9.0) 未サポート 未サポート 未サポート
    文字列値 未サポート 9.0 (9.0) 未サポート 未サポート 未サポート
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート (有) 7.0 (7.0) ? (有) (有)
    2 値構文 未サポート 9.0 (9.0) 未サポート 未サポート 未サポート
    文字列値 未サポート 9.0 (9.0) 未サポート 未サポート 未サポート

    Gecko に関する注記

    Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) より、左右両側でインラインのオーバーフローが起きているブロックでの text-overflow の処理が修正されました。以前は 1 つの値だけを指定すると(例:text-overflow:ellipsis;)、文章の方向に基づいた終端だけでなく、両端に省略記号が生じていました。

    Internet Explorer に関する注記

    IE8 では text-overflow の同義値として -ms-text-overflow が導入されました。 -ms- プレフィックスは使用しないでください。

    【訳注: -ms-text-overflow は IE8 モードでのみ機能します。IE7 モード、EmulateIE7 モード、IE5 モードでは機能しません (参照 : Internet Explorer 8 における CSS の改良点)】

    Opera に関する注記

    Opera 9 と 10 ではプレフィックス版、-o-text-overflow が必要です。

    ブラウザ バージョン サポートする値
    Internet Explorer 6.0 text-overflow ellipsis | clip
    Firefox (Gecko) 7.0 (7.0) text-overflow ellipsis | clip
    Opera (Presto) 9.0 (2.0) -o-text-overflow ellipsis | clip
    11.0 (2.7) text-overflow ellipsis | clip
    Safari | Chrome | WebKit 1.3 | 1.0 | 312.3 text-overflow ellipsis | clip

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: hATrayflood, ethertank, sosleepy
    最終更新者: ethertank,
    サイドバーを隠す