CSS講座 / あふれた内容・長い文字列・省略記号を扱う

overflowはボックスからはみ出す内容の表示やスクロールを指定しますが、適切な折り返し方まで自動的に選ぶものではありません。折り返し、寸法制限、省略を組み合わせ、必要な全文を読める経路を残します。

同じ内容でoverflowを比較する

バーが常に目に見えるかはOSやブラウザーの重ね合わせスクロールバー設定にも依存します。hiddenもスクリプトやフォーカス移動でスクロールできる場合があり、内容の削除を意味しません。スクロール自体を禁止するclipとは別です。MDNのoverflowで違いを確認できます。

本文を固定高とhiddenで切ると、文章の追加、翻訳、文字拡大で情報が消える場合があります。まず内容に応じた高さを考え、独立パネルなど制限が必要な場所だけスクロールを使います。完全な例は同じ四段落を96pxの枠へ入れ、visibleの後にも比較用の空間を残しています。

長いURLや識別子を折り返す

.url { overflow-wrap: anywhere; }

空白のないURLや識別子は折り返し場所が不足して横にはみ出すことがあります。overflow-wrap: anywhereは必要な場合に途中で折り返す機会を作ります。文字自体を削除したり、値の中に改行文字を挿入したりするものではありません。

すべてへword-break:break-allを指定すると普通の単語まで不必要に割れます。まず長い値を表示する場所で折り返しを許可します。FlexboxやGridの自動最小幅は別に調べ、min-width:0が必要かも確認します。MDNのoverflow-wrap、Flexアイテムの縮小を参照できます。

一行を省略する条件をそろえる

.title {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

一行省略には実際に制限した幅、white-space:nowrap、overflow:hidden、text-overflow:ellipsisを組み合わせます。幅が内容に合わせて増えれば省略は不要になり、改行すれば一行という比較条件が変わります。ellipsisだけでは寸法や改行を決めません。複数行省略は別の方法です。

完全な例は省略した題名の全文を下にも表示します。注意事項やエラーメッセージなど全文が必要な情報を、別の確認方法なしで隠さないでください。マウス用のtitleツールチップだけに頼ることも避けます。MDNのtext-overflowで条件を確認できます。

スクロール領域をキーボードで操作する

<div class="panel auto" tabindex="0" role="region" aria-label="Notice scroll area">
  <p>Notice content</p>
</div>

スクロール領域が自動的にキーボードフォーカスを受けるかはブラウザーによって異なります。操作が必要なパネルにtabindex="0"を付けると通常のTab順で移動できます。role="region"と説明的な名前は領域を理解する助けになりますが、すべての枠をフォーカス対象や領域にする必要はありません。

この例は実際にスクロールが必要なautoとscrollだけへ名前と輪郭を付けています。Tabで入り、矢印キーやPage Downで最後まで読めるか確認します。狭い画面ではパネル内とページ全体のスクロールが区別できるかも見ます。

完全な例で表示と操作を比較する

次をUTF-8のoverflow.htmlとして保存します。四つのパネル、長いURL、省略と全文の比較を含みます。example.comの値は改行観察用の文字列で、実際の資料へのリンクではありません。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing overflowing content</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
      border: 2px solid #777; background: #eef6fa; }
    .panel p { margin: 0 0 8px; }
    .visible { overflow: visible; }
    .visible-stage { padding-bottom: 240px; }
    .hidden { overflow: hidden; }
    .auto { overflow: auto; }
    .scroll { overflow: scroll; }
    .panel:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    .url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
    .title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .original { max-width: 320px; }
  </style>
</head>
<body>
  <h1>Overflow and truncation</h1>
  <section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <h2>Long URL wrapping</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
  <h2>Single-line truncation</h2><p class="title">A day of plant care and visitor preparation at Small Garden</p>
  <p class="original">Full title: A day of plant care and visitor preparation at Small Garden</p>
</body>
</html>

1. 四パネルの最後の段落を比べます。visibleは外へ見え、hiddenは切れ、autoとscrollは内部で移動して読めます。
2. autoを一段落だけにし、短くなると必要なスクロールがなくなるか確認して四段落へ戻します。バーの有無だけであふれを判断しません。
3. Tabでautoへ入り、輪郭と矢印キーでの移動を確認し、Shift+Tabで前へ戻ります。
4. URLのoverflow-wrapを外して窓を狭め、横にはみ出すことを確認してanywhereへ戻します。
5. 題名のellipsisをclipへ変えて記号なしの切れ方を比較し、nowrapをnormalへ変えて改行も試してから戻します。

ページ全体が横へ押し出されるなら最も広い要素と親の最小幅・paddingを調べます。読めない文章があるなら固定高とhiddenを先に確認し、省略やスクロールを足す前に全文の保ち方を決めます。