CSS の line-clamp で複数行テキストを省略表示する

<div class="demo-wrap">
  <div class="demo-card">
    <p class="clamp-text">CSSのline-clampを使うと、複数行のテキストを指定した行数で切り詰めて末尾に省略記号を表示できます。カードUIやニュース一覧など、限られたスペースに長いテキストを収めたい場面で非常に便利です。JavaScriptを使わずにCSSだけで実現できるため、実装もシンプルになります。</p>
  </div>
  <div class="demo-card">
    <p class="no-clamp">CSSのline-clampを使うと、複数行のテキストを指定した行数で切り詰めて末尾に省略記号を表示できます。カードUIやニュース一覧など、限られたスペースに長いテキストを収めたい場面で非常に便利です。JavaScriptを使わずにCSSだけで実現できるため、実装もシンプルになります。</p>
  </div>
</div>

.demo-wrap {
  display: flex;
  gap: 12px;
}
.demo-card {
  flex: 1;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}
.clamp-text::before {
  content: "3行で省略";
  display: block;
  font-size: 11px;
  color: #6366f1;
  margin-bottom: 4px;
  font-weight: bold;
}
.no-clamp {
  font-size: 13px;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}
.no-clamp::before {
  content: "省略なし";
  display: block;
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 4px;
  font-weight: bold;
}

<div class="card-grid">
  <div class="pcard">
    <div class="pcard-title">CSSのline-clampで複数行テキストを省略表示する方法</div>
    <div class="pcard-desc">line-clampを使うと複数行のテキストを指定した行数で切り詰めて末尾に省略記号を表示できます。カードUIやニュース一覧で便利です。</div>
  </div>
  <div class="pcard">
    <div class="pcard-title">短いタイトル</div>
    <div class="pcard-desc">短い説明文です。</div>
  </div>
  <div class="pcard">
    <div class="pcard-title">FlexboxやGridの子要素で使うときはmin-widthに注意</div>
    <div class="pcard-desc">Flexアイテムはデフォルトでmin-width: autoが適用されるため、テキストがコンテナからはみ出してしまうことがあります。min-width: 0を指定することで解決できます。</div>
  </div>
</div>

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pcard {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  min-width: 0;
}
.pcard-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: bold;
  color: #111827;
  margin-bottom: 6px;
}
.pcard-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}