CSS / 文字を省略する方法：1行と複数行の三点リーダー

CSSで長いテキストを視覚的に短縮するには、単一行にはtext-overflow: ellipsisを、複数行にはline-clampプロパティを使用します。CSSは元の文字列を削除したり、固定文字数を返したりするものではありません。省略が表示されるためには、使用可能な幅、折り返し、オーバーフローが一緒に機能する必要があります。

表示上の省略と文字列の変更を区別する

タイトルを1行に制限したり、カードの要約を3行に制限することは、最初の20文字をデータとして使用することとは異なります。視覚的な制限にはCSSを使用し、実際の文字列操作にはJavaScriptやサーバー側の処理を使用してください。隠されたテキストは文書内に残るため、CSSは元のデータの長さや転送サイズを減らすことはありません。

完全な例で1行と3行を比較する

以下の完全なコードを UTF-8 形式で truncate.html として保存し、ブラウザで開きます。ライブラリやサーバーは不要です。繰り返される文がテキストを十分に長くし、カードの最大幅は 24rem です。編集後に保存して再読み込みし、広いウィンドウと狭いウィンドウを比較してください。

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>1行と複数行の省略を比較</title>
<style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .card { width: 100%; max-width: 24rem; }
    .frame { padding: 12px; border: 1px solid #777; margin-block: 1rem; }
    .sample { margin: 0; }
    .one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .three { font-size: 16px; line-height: 1.6; max-height: 4.8em; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .row { display: flex; align-items: center; gap: 12px; }
    .grow { flex: 1; min-width: 0; }
    .badge { flex: 0 0 auto; }
    .full { line-height: 1.6; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>1行と複数行の省略を比較</h1>
<div class="card">
<h2>text-overflow: ellipsis</h2>
<div class="frame"><p class="sample one">長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 </p></div>
<h2>-webkit-line-clamp: 3</h2>
<div class="frame"><p class="sample three">長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 </p></div>
<h2>display: flex</h2>
<div class="frame row"><div class="grow"><p class="sample one">長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 </p></div><span class="badge">A</span></div>
<details>
<summary>全文を読む</summary>
<p class="sample full">長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 長い見出しと要約を限られたカード内に表示する例です。画面上で一部が省略されても、全文は下の開閉領域で読むことができます。 </p>
</details>
</div>
</body>
</html>

最初のボックスでは1行の切り捨て、サポートされている場合は2番目ボックスで最大3行、3番目のFlexbox内では1行の切り捨てを期待してください。下の展開可能セクションを開くと全文を読むことができます。短いテキストは制限に達しない場合があり、その場合は省略記号が表示されません。実際の折り返しはフォント、内容、および利用可能な幅によって決まります。

1行で三点リーダーが表示される条件

1行の切り詰めには、テキストが水平スペースをあふれる必要があります。white-space: nowrapは折り返しを防ぎ、overflow: hiddenは余分な部分を隠し、text-overflow: ellipsisは切り取られた末尾を示します。以下は完全な例の.oneルールです。

.one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

text-overflowを設定するだけでは、あふれを強制したり、ボックスを狭くしたりすることはできません。ここでは親カードが幅を制約しています。ボックスが内容とともに成長し続ける場合や、テキストが十分に短い場合、省略記号は表示されません。通常のインライン要素は期待通りに動作しないことがあるため、ブロックボックスと実際のレイアウトコンテキストを確認してください。MDNによるtext-overflowの説明

複数行の制限と高さによる代替処理

text-overflow: ellipsis を単独で追加しても、3 行目の末尾に省略記号は表示されません。例では、従来の互換性宣言である -webkit-line-clamp: 3、display: -webkit-box、-webkit-box-orient: vertical を組み合わせ、さらに overflow を非表示にしています。以下はその .three ルールです。

.three {
  font-size: 16px;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

ここでフォントサイズを16px、行の高さを1.6にすると、1 行の高さは25.6px、3 行で占める高さは76.8px または 4.8em です。max-height: 4.8em は clamping が利用できない場合でも高さを制限します。高さの制限だけでは省略記号が保証されるわけではありません。この計算は、例で用いられている一貫したフォントサイズと行の高さを前提としており、テキスト要素に別のパディングやボーダーはありません。

接頭辞なしのline-clampプロパティはブラウザごとのサポートが異なるため、サポート表とターゲット環境でのレンダリングを確認してください。適切な場合は機能クエリで段階的に適用し、互換性宣言を置き換える前にサポートを確認してください。2つの行を比較するには、clampの数とフォールバックの高さをそれぞれ2と3.2emに変更し、元の値に戻します。MDNのline-clampの互換性とサポート情報

FlexboxやGridで要素が縮まない場合

フレックスアイテムの自動最小幅は、コンテンツサイズに固定されることがあり、親要素が狭まる際に十分に縮まらないことがあります。例では.growにflex: 1とmin-width: 0の両方を与えて縮小可能にしています。実際にテキストを含む.oneに切り捨てを適用してください。

開発者ツールで .grow の最小幅を一時的に削除し、比較してから元に戻します。これはすべてのフレックスアイテムに必ずしも必要な要件ではありません。実際の最小サイズとオーバーフロー条件を確認してください。グリッドの自動最小サイズの問題については、アイテムの最小幅を確認し、適切な場合は minmax(0, 1fr) のような柔軟なトラック定義を検討してください。MDN による min-width の自動最小サイズの説明

全文とアクセシビリティを提供する

隠されたコンテンツを読む方法を提供します。例の details と summary は、JavaScript を使用せずにマウス、タッチ、キーボードで動作するネイティブの HTML 要素です。実際のインターフェイスでは、代わりに詳細ページへのリンクや明確な展開コントロールを提供できます。

1. タイトル属性のマウスツールチップだけに頼って、コンテンツ全体を読む手段としないでください。タッチ操作やキーボード操作のユーザーもアクセスできる必要があります。
2. 隠しテキストがコピーされたり支援技術で読み取られたりした際の表示方法は異なる場合があります。必要なテキストが読み取れる状態であること、展開コントロールにフォーカスが機能することを確認してください。
3. モバイル画面やズーム、ユーザー選択フォントを確認してください。固定された文字数や単語数を保証せず、重要な情報、ボタン、入力フィールドに対して切り捨てを適用しないようにしてください。