CSS 入門

CSS テキスト溢れ処理

フロントエンド開発において、テキストコンテンツがコンテナの幅を超えてしまう場合、CSSのプロパティを組み合わせて表示方法を制御する必要があります。一般的には、単一行の省略、複数行の切り詰め、あるいは強制改行といった手法が用いられます。

これらのエフェクトを実現するための鍵は、white-space、overflow、text-overflow という3つのプロパティを柔軟に使い分けることにあります。

1. コアプロパティの解説

テキストを切り詰めて省略表示（エフェクト）を実現するには、3つの前提条件を同時に満たす必要があります。それは「コンテナに幅があること」「テキストの自動改行を禁止すること」「溢れた内容を非表示にすること」です。

  • white-space: 要素内部の空白や改行の扱いを制御します。nowrap を使用して強制的に単一行で表示させます。
  • overflow: 内容がコンテナから溢れた際の挙動を制御します。hidden を指定して、はみ出た部分を隠します。
  • text-overflow: 溢れたテキストの表示方法を専門に扱います。ellipsis を指定すると、溢れた部分が三点リーダー（...）に置き換わります。

2. 単一行テキストの省略表示（Ellipsis）

単一行の溢れ防止はCSSの最もクラシックな応用シーンであり、タイトルバー、ナビゲーションメニューなど、スペースが制限されたUIコンポーネントに適しています。

.text-ellipsis {
  width: 200px;           /* 幅または最大幅の指定が必須 */
  white-space: nowrap;    /* テキストの改行を禁止 */
  overflow: hidden;       /* 溢れた内容を非表示にする */
  text-overflow: ellipsis; /* 三点リーダーを表示 */
}

3. 複数行テキストの省略表示

複数行での省略（切り詰め）は、通常 WebKit エンジンのプライベートプロパティを組み合わせて実現します。より汎用的なシーンでは、CSSの display: -webkit-box レイアウトを使用するのが一般的です。

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* 表示する行数を3行に制限 */
  overflow: hidden;       /* 溢れた部分の非表示化が必須 */
}

4. よくある問題と注意点

テキスト溢れを処理する際、デベロッパーが見落としがちなディテールがいくつかあります。

  • ブロックレベルの制限: text-overflow プロパティは、ブロックレベル要素、または display: block / inline-block が設定された要素でのみ有効です。
  • 幅の欠如: 親コンテナや子要素に幅が設定されていない場合、テキストがコンテナを無限に広げてしまい、切り詰め機能が動作しません。
  • インライン要素: <span> などのインライン要素に直接これらのプロパティを適用しても効果がありません。先に inline-block や block に変換する必要があります。
  • 互換性: -webkit-line-clamp はモダンブラウザで広くサポートされていますが、極めて高い互換性が求められる古い Firefox や IE では、JavaScript や高さ制限（max-height + overflow: hidden）によるフォールバック検討が必要です。
  • セマンティクス: 切り詰められたテキストは視覚的に消えても、DOM内には存在し続けます。SEOやアクセシビリティ（A11y）にとって重要なコンテンツの場合、title 属性を使用して完全なテキストを表示させるなどの工夫を推奨します。

5. 応用：強制改行のハンドリング

テキストを切り取らずに、長大な単語や文字列を強制的に改行させたい場合があります。その際は word-break と overflow-wrap を組み合わせて使用します。

  • word-break: break-all: 単語の切れ目を考慮せず、文字単位で強制改行します。連続する長いURLやコードスニペットに適しています。
  • overflow-wrap: break-word: 可能な限り単語の境界で改行を試みますが、どうしても収まらない場合のみ単語の途中で改行します。視覚的により自然な結果が得られます。

これらのプロパティを組み合わせることで、ウェブページのテキスト表示ロジックを正確に制御し、あらゆるデバイスやスクリーンサイズにおいてクリーンな閲覧体験を維持することが可能になります。