ボックスからあふれたテキストを「…」で省略表示

2014/6/3 CSS, HTML

ページ送りの記事にもちょこっと書いていますが、1行分のボックスからあふれたテキストを省略表示する場合のサンプルです。

HTML

<p class="sample">ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>

.sample {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}