CSSの「text-overflow」は、テキストが領域からはみ出ている場合の処理を指定するプロパティです。

表示する文字が多かった場合、省略したことを表すために「...」と表示することが多々ありますが、これがCSSだけで可能になるんです。
…ご存知でしたか？

「text-overflow」には２つの値、「clip」と「eclips」が定義されていています。
意味はそれぞれ以下の通り。

  • text-overflow:clip; → デフォルトの値で、省略符号は表示しません。
  • text-overflow:eclips; → テキストが表示領域を越えた場合に省略符号「…」を表示します。

通常、システムコードなどでは文字数を指定して「…」を表示しますが、CSSでは幅を指定して、その領域よりもはみ出た場合に省略記号「…」を表示することになります。

具体的な text-overflow:ellipsis; の記述例

p {
white-space:nowrap;
width:100%;
overflow:hidden;
text-overflow:ellipsis;
}

改行をしない white-space:nowrap; を併用して記述しないといけないため、表示できるのは１行目のみとなり、１行目の最後に省略記号「…」がつくことになります。
複数行で使用したい場合は javascript を使うなどの工夫が必要ですね。