【CSS】要素が一定数以上ある場合に省略表示する方法

Webページ上で多数のリストアイテムやコンテンツを扱う際、特定の数を超えた要素を省略表示したいことがあります。この記事では、CSSを活用して要素の数が一定数を超えた場合に省略表示する方法をご紹介します。

あなたはブログのプロです。上記を紹介するブログの記事を見出し付きで書いてください。

CSSで要素を省略表示する基本的な方法
1. HTML
2. CSS
JavaScriptを使った動的な要素の省略表示

CSSで要素を省略表示する基本的な方法

CSSだけで要素を省略表示するシンプルな方法を見ていきましょう。ここでは、リストの最初の3つのアイテムのみを表示し、それ以降のアイテムを非表示にする例を取り上げます。

HTML

<ul class="truncate">
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
  <li>アイテム 4</li>
  <li>アイテム 5</li>
</ul>

CSS

.truncate {
  max-height: 4.5em; /* 各アイテムの高さに応じて調整 */
  overflow: hidden;
  position: relative;
}

.truncate::after {
  content: '...'; /* 省略記号を表示 */
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* 背景色と一致させる */
  padding-left: 10px;
}

このCSSコードでは、.truncateクラスを持つ要素の高さをmax-heightで制限し、overflow: hidden;を使用して、超過部分を非表示にしています。また、::after疑似要素で省略記号を追加し、リストが続いていることを示します。