テキスト

text-overflow

text-overflow は、箱からはみ出した文字の終わりをどう見せるかを決めます。ellipsis にすると、切れたところに「…」が付きます。

構文

[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

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

text-overflowellipsis

clipellipsis

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

text-overflow だけでは何も変わりません。行を折り返さないようにして（white-space: nowrap）、はみ出した分を隠す（overflow: hidden）と、行の終わりの見せ方が変わります。このページのコードにも、この 2 つを一緒に書いています。

仕様には、好きな文字列で切れ目を示す書き方（"→" など）や、左右の端に別々の値を書く書き方もありますが、Chrome は対応していないのでこのページでは選べません。

text-overflow は 1 行にしか効きません。2 行目や 3 行目で「…」を付けたいときは -webkit-line-clamp を使います。