CSS3 Pre-Reference



text-overflow

はみ出たテキストの直前の省略符号

試す



コード

#containe p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

サンプル

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

到底(あと)ってしまった。これは減る、しばらくしているがない。

これを守らなければなら家内(めしびつ)まれた御馳走は人を見出(こたつ)って一間(まった上、朝は我儘(と見えてこれをかぶせたり、今日(かない)ねばよい昼ははなはだ不人望で泣き出すので正当に住んであるまい。しかもあとって行くと。その後(たび)める事やらいくら出してやれといったまま奥へ這入(はい)ったら書生の上から食物(とうてい)いての中である。

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
6~

パラメータ

clip | ellipsis | <文字列>
初期値 auto
適用 ブロックコンテナ
継承 しない
レベル 3
%の解釈 -
適用メディア Vidual
参考文献 CSS Text Level 3#11.1. Overflow Ellipsis: the ‘text-overflow’ property

解説

ボックスからテキストがはみ出して切り取られる場合、切り取られる境界部分の扱いを指定します。

このプロパティは、InternetExplorerで独自に実装されていたものがCSS3になって公式に採用されたものです。

clip
単純に切り取ります。
ellipsis
切り取られた箇所に省略記号(U+2026)を表示します。
<文字列>
切り取られた箇所に指定の文字を表示します。

トラックバック

投稿されたコメント