目次
Chrome 157のリリースノートでは、CSSのtext-overflowに独自の文字列を指定する値が追加されたと案内されています。一行の見出しや一覧項目で、従来の三点リーダー以外の省略記号を選ぶ実装が対象です。導入時は記号の置き換えだけで終えず、未対応環境の表示と、隠れた全文へ進む方法を一緒に設計してください。
本稿は2026年11月13日に確認した公式リリースノートとCSS仕様に基づく実践解説です。新しい値を全ブラウザーで同時に利用できるという説明ではありません。掲載コードは未実行例、表示条件と試験計画は本サイトの提案です。対応判定が通ることと、対象環境で意図した表示になることを分けて確認します。
スポンサーリンク
文字数を削る処理と表示幅で隠す処理は異なる
Chrome 157の公式リリースノートは、text-overflow: <string>により、切り取られた内容を表す文字列を指定できると説明しています。例えば「［略］」という表示へ変えられます。一方、元の文字列を指定文字数で切り詰めるではなく、何文字残すかを直接指定する機能でもありません。
同じ20文字でも、日本語、英数字、絵文字、利用フォントによって必要な幅は変わります。カードの幅へ合わせたいのに、文字数だけで短い文字列を作ると、広い画面でも元の情報を戻せません。表示幅を基準にするなら、まず全文を保持したままCSSで描画を制御する案を比較します。
複数行の末尾を省略するline-clampとも目的を分けます。本稿で扱うのは、行の進行方向にはみ出した内容の表示です。「三行目の最後へ好きな文字列を必ず出せる」と一般化しないでください。CSS Overflow Level 4には複数行に関わる拡張もありますが、仕様に値が書かれていることだけで、その組み合わせの実装を保証できません。
まず従来のellipsisで一行表示を成立させる
CSS Overflow Level 3のtext-overflow定義を踏まえ、幅、折り返し、はみ出しの扱いを先にそろえます。次は記事一覧のタイトルを一行で表示する最小例です。リンク先は説明用のパスなので、実装時には実際の記事URLへ置き換えます。全文を読む導線は、省略記号そのものと別に置いています。
<article class="result">
<h3>
<a class="result__title" href="/articles/example">
レスポンシブな一覧で長い記事タイトルを表示するための実装メモ
</a>
</h3>
<a href="/articles/example">全文を読む</a>
</article>.result {
max-inline-size: 28rem;
}
.result__title {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}幅に余裕があるときは内容が収まり、省略表示が出ないのが自然です。text-overflowを付けたのに記号が見えない場合、まず本当に内容がはみ出しているかを確認します。反対にoverflowだけを隠していると、文字が切れていても、その先に続きがあることが利用者へ伝わりにくくなります。
文字を入れた要素がspanなどのインライン要素なら、例と同じブロックの条件になっているかも見ます。親に設定した値が内側の段落へ自動で適用されるとは限りません。仕様上text-overflowは継承されないため、どの箱が幅を持ち、どの箱が行のはみ出しを処理しているかを開発者ツールで確認してください。
スポンサーリンク
文字列値は対応環境だけに適用する
基礎の表示が成立したら、独自記号の指定を追加します。CSS Conditional Rulesの@supportsは、プロパティと値の対応に応じてルールを適用する仕組みです。プロパティ名だけでなく、今回使いたい文字列値を条件へ含めます。
@supports (text-overflow: "［略］") {
.result__title {
text-overflow: "［略］";
}
}未対応環境では基礎のellipsisを使い、対応環境では「［略］」を使う構成です。どちらでも同じ記事へ進めることを受け入れ条件にします。ブラウザー名から独自に分岐するより、必要な宣言を判定する方が、新しい対応版を追加するたびに条件を書き直す負担を減らせます。
ただし@supportsをスクリーンショットの検証の代わりにはしません。値を受け付けても、極端に狭い幅、混在する文字方向、選択中の表示まで、自分たちの期待と一致するとは限りません。CSS Overflow Level 4は作業中の編集者草案でもあるため、将来の仕様と実装の差分を追えるよう、確認日とブラウザー版を記録します。
独自記号を長くすると本文の表示領域が減る
CSS Overflow Level 4の定義では、省略記号や指定文字列を収めるために、端の文字などを隠す扱いが示されています。「続きはこちらをクリック」のような長い文を置くと、その文のために見えるタイトルが減ります。省略文字列は短い状態表示にとどめ、詳しい案内は別のリンクやボタンへ出す方が扱いやすいでしょう。
幅がさらに小さくなると、省略表示自体を完全に出せない場合もあります。そのため、記号が見えることだけを「全文へ進める」証拠にしないでください。商品名、送信先、金額、識別番号など、取り違えが業務へ影響する情報は、一行の省略に向かない場合があります。重要な識別情報だけ別欄へ出す、折り返しを許すといった選択肢も比較します。
一つの値は行の終端側へ適用されますが、終端が常に画面の右側とは限りません。多言語サイトでは、dirが異なる項目や日本語と英数字が混在するタイトルを確認します。二値構文まで一度に導入せず、まず一値で必要な動作を確かめると、今回変更した条件を絞って評価できます。
スポンサーリンク
省略記号を全文表示のボタンに見せない
text-overflowの文字列は独立した操作部品ではありません。見た目が「もっと見る」でも、その文字列へ別のクリック処理やキーボード操作が自動で追加されるわけではありません。全文を同じ画面で開くなら実際のボタン、詳細ページへ進むなら実際のリンクを用意し、操作と単なる省略表示を区別します。
前の例ではタイトル自体もリンクですが、「全文を読む」を別に置くことで、末尾まで読める場所があると伝えます。title属性のツールチップだけを唯一の全文確認手段にせず、タッチ操作とキーボード操作の両方で詳細へ進める経路を残します。CSSを無効にした状態でも、元の文章とリンクの意味が読める構造から始めてください。
W3Cの文字サイズ変更に関する解説は、内容や機能を失わずに200%まで文字を拡大できることを説明しています。ラベルの省略を許容する例でも、フォーカスや操作後に全文を利用でき、省略されていること以外の手掛かりでアクセス方法が伝わる条件が示されています。本稿のコードを入れただけで適合を宣言せず、実際の導線まで評価します。
印刷や詳細画面では省略を解除する方針を持つ
一覧をそのまま印刷する業務では、画面上のリンクを押せない紙に、省略された情報だけが残る可能性があります。次は印刷時に折り返しと全文表示へ戻す提案例です。実際の帳票では、見出しの欠落やページをまたぐ表示も含め、印刷プレビューと出力結果を確認します。
@media print {
.result {
max-inline-size: none;
}
.result__title {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
}
}詳細ページでも、省略した一覧用のクラスをそのまま再利用しないようにします。共通コンポーネントで一行表示を既定にすると、詳細画面まで切れたままになり、全文への導線が循環することがあります。用途ごとに全文表示か省略表示かを選べる設定にして、文字列データ自体は途中で失わない構成を勧めます。
幅と内容の組み合わせを固定して比較する
検証では、単に長い文章を一つ用意するだけでは足りません。短いタイトル、長い日本語、空白のない英数字、絵文字を含む名称、右から左へ読む文字を別々に用意します。同じ素材を対応環境と未対応環境で使い、幅と拡大率を変えた結果を並べると、記号の変更とレイアウトの問題を分けられます。
| 条件 | 確認する内容 |
|---|---|
| 十分に広い幅 | 収まる内容を不要に省略しない |
| 狭い幅と長い名称 | 記号と残った文字が重ならず全文へのリンクが使える |
| 文字サイズを200%へ拡大 | 導線や重要な情報を失わない |
| 文字列値に未対応 | ellipsisへ戻っても同じ詳細を読める |
| キーボードとタッチ | ツールチップに依存せず全文へ進める |
| 印刷プレビュー | 必要なタイトルを最後まで確認できる |
Webフォントを使う場合は、読み込み前と読み込み後も比較します。文字の幅が変わると、同じ要素幅でも省略が始まる位置が変わるためです。省略が起きるかどうかを固定の文字数で予想せず、最終的に利用者が見るフォントと余白で確認します。読み込みの遅い環境でリンクが押せなくならないかも見ます。
記号が出ないときは値より先に箱を調べる
切り分けの順序は、表示対象の文字列が残っているか、要素に制約された幅があるか、実際にはみ出しているか、overflowとwhite-spaceが上書きされていないか、最後にtext-overflowの適用値です。基礎のellipsisでも動かない場合に、独自文字列の対応だけを調べ続けないことが大切です。
既存のJavaScriptがtextContentを短い文字列へ書き換えている場合、CSSの指定を追加しても消えた全文は戻りません。サーバー側の抜粋生成、画面側の文字列加工、CSSの省略という三つの経路を確認し、どこが元の値を持つかを決めます。表示だけを変えたい移行で、保存済みタイトルまで短縮しないようにしてください。
採用時は一覧の一種類から始め、通常幅、狭い幅、文字拡大、未対応環境、全文表示の五つを確認してから適用範囲を広げます。独自記号がなくても情報へ到達できることを基礎にすると、新しい値を見た目の改善として取り入れやすくなります。表示を省く実装と、情報を利用者へ渡す設計を同時に完成させてください。
スポンサーリンク
関連記事
指定した行数でテキストを省略する既存解説は、複数行の省略を選ぶ場合の参考になります。旧来の接頭辞付き構文と当時の前提を扱う記事であり、本稿の文字列値や現在のブラウザー対応を確認する資料とは分けて参照してください。
参考資料
Chrome Platform Status：Chrome 157 Release Notes
Chrome Platform Status：CSS text-overflowの文字列値
CSSWG：CSS Overflow Module Level 3
CSSWG：CSS Overflow Module Level 4（編集者草案）
CSSWG：CSS Conditional Rulesの@supports
W3C WAI：文字サイズ変更の達成基準1.4.4の解説
