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

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

HTML

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

CSS

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

表示サンプル

サンプルhtml

省略表示のサンプル

シェアする

  • このエントリーをはてなブックマークに追加

フォローする