テキストは省略か、折り返しか。「…」で大事な情報を消さないための判断基準と渡し方

省略するか、折り返すか

まず、省略は「例外」として扱うのが基本です。SAP Fiori のガイドラインは、折り返しを一般的な基本のふるまいとし、省略したときは1回の操作で全文を見られるようにすることを求めています。Carbon Design System も、ページの見出し・タイトル・ラベル・エラーメッセージ・入力チェックのメッセージ・通知には省略を使わないとしています。

判断は、次の3つの問いで足ります。

1. 切れた部分がなくても、次の操作を選べるか。 選べないなら折り返す。ボタンのラベル、エラー、金額、同じ名前が並ぶ一覧の見分けどころは、ここで「折り返す」側に入ります。
2. 行の高さをそろえる理由があるか。 表の行、カードの並び、タブなど、高さがずれると比べにくくなる部品だけが省略の候補です。
3. 全文を1回の操作で読めるか。 詳細画面に進める、行を開ける、フォーカスで全文が出るなど、道があるときだけ省略してよい、とします。

3つ目を満たせないなら、省略ではなく、折り返しにするか、幅や情報の並べ方を見直します。

省略するときに決める3つのこと

省略すると決めたら、デザインの段階で次の3つを決めます。Figma の画面に「…」が見えているだけでは、実装する人はこの3つを推測するしかありません。

1. 切る位置：末尾・中間・先頭

多くの実装は末尾で切ります。ところが、見分けに使う情報が末尾にあるテキストは少なくありません。Carbon は先頭（front-line）・中間（mid-line）・末尾（end-line）の3種類を挙げ、PatternFly も、末尾を「…」で切れないときに中間の省略を使うとしています。

中間の省略を指定するときは、「末尾の何文字を残すか」まで書きます。拡張子だけでなく、直前の版や枝番まで残したいことが多いからです。

2. 全文への道

利用者が文字を拡大したり、行間や字間を広げたりすると、デザインでは収まっていたテキストも省略されます。WCAG 2.2 の達成基準 1.4.12（テキストの間隔）の解説書は、はみ出たテキストを省略記号に置き換えるのはよくある慣習だとしたうえで、そうして省略されたテキストを表示する手段がなければこの基準を満たさない、としています。1.4.4（テキストのサイズ変更）の解説書も、フォーカスしたときやユーザーが操作した後に全文が見られるなら、省略してよいとしています。全文への道は、文字を大きくして使う人のためにも必要です。

ここでよく選ばれるのが、HTML の title 属性によるツールチップです。ただし HTML の仕様は、title 属性に頼ることは今のところ推奨しないとし、マウスなどのポインターが必要なため、キーボードだけ・タッチだけの人を除外してしまうと書いています。Carbon や PatternFly のように、ホバーで全文を出すツールチップを勧めるデザインシステムもありますが、それだけを道にはせず、補助と考えます。主な道は、次のどれかにします。

• 行やカードを押すと詳細画面に進み、そこで全文が読める
• 「もっと見る」などで、その場で全文を開ける
• キーボードのフォーカスやタップでも全文が出る、自前のツールチップやポップオーバー

3. 記号と、何行で切るか

記号は「…」（U+2026、三点リーダー1文字）が基本です。ピリオド3つ「...」は、半角で幅も違うので使いません。行数は、1行で切るのか、2〜3行で切るのかを、部品ごとに決めて書きます。説明文のように複数行で切るときは、何行目の末尾で切るかを指定します。

Chrome 157 で使えるようになった任意の文字列は、たとえば「（続く）」のように、省略されていることをはっきり伝えたい場面で役立ちます。ただし、text-overflow が効くのは行の中で横にはみ出す部分なので、使いどころは1行の省略です。複数行を何行目かで切るときの記号は、仕様では別のプロパティで検討されていて、まだ広く使えません。次の節のとおり対応していないブラウザもあるので、デザインでは「対応していないブラウザでは『…』になる」前提で指定します。

text-overflow の文字列・line-clamp の対応状況と実装の形（2026年11月時点）

変わりやすい情報なので、この節にまとめます。

• text-overflow の文字列の値：Chrome は 157 から（安定版は2026年11月3日に公開）。Firefox は 9 から対応しています。Safari は対応していません。MDN などの対応表には、新しい版の対応がまだ反映されていないことがあります。仕様は CSS Overflow Module Level 4 の編集者草案にあり、まだ変わる可能性があります。
• text-overflow の前提：text-overflow だけでは、はみ出しは起きません。MDN のとおり、overflow と white-space などをあわせて指定します。
• 複数行の省略：実装では -webkit-line-clamp を display: -webkit-box と -webkit-box-orient: vertical と組み合わせて使います。接頭辞のない line-clamp は、MDN では広く使える状態（Baseline）になっていません。
• Figma：テキストの設定の「Truncate text」で末尾に「…」が付き、「Max lines」で何行目で切るかを決められます。中間や先頭の省略は、この機能では表せないので、作例で示して注記します。

実装する人に渡すときの参考に、3つの形を CSS で書くと次のとおりです。Chromium 153（文字列の値に対応していない版）で動かし、1つ目の形（.truncate-end）が「…」にフォールバックすること、2行目で切れること、中間の省略で末尾の「版.pdf」が残ることを確かめました。文字列の値そのものの表示は、対応するブラウザで確かめてください。

/* 1行・末尾で省略。対応していないブラウザは前の行の ellipsis を使う */
.truncate-end {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-overflow: "…（続く）";
}

/* 2行目の末尾で省略 */
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 中間で省略：前半だけ縮め、末尾は残す */
.truncate-middle { display: flex; min-width: 0; }
.truncate-middle__head {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.truncate-middle__tail { flex-shrink: 0; white-space: nowrap; }

中間の省略は、テキストを「縮めてよい前半」と「残す末尾」の2つに分けて組みます。どこで分けるかはデータによるので、デザインでは「末尾の何文字を残すか」を決めておくと、実装で迷いません。

渡すときのチェックリスト

部品ごとに、次の項目を仕様に書いておくと、実データで崩れたときにも判断がぶれません。

• この部品のテキストは、折り返すか、省略するか
• 省略するなら、何行で切るか（1行／2行／3行）
• 切る位置は、末尾・中間・先頭のどれか。中間なら、末尾を何文字残すか
• 記号は「…」か、対応ブラウザでの任意の文字列か（対応していないときは「…」）
• 全文への道は何か（詳細画面、その場で開く、フォーカスでも出るツールチップ）
• いちばん長い実データを入れた状態の画面（想定の最大文字数と、それを超えたとき）

最後の項目がいちばん効きます。Figma で、実データの中からいちばん長いものを入れたフレームを1つ足しておくと、省略の指定が必要な場所が、デザインの段階で見えてきます。

まとめ

• 省略は例外。見出し・ラベル・エラー・通知・金額は折り返す。
• 省略するなら、切る位置・全文への道・記号と行数の3つを、デザインの段階で決めて書く。
• ホバーだけのツールチップは主な道にしない。フォーカスやタップ、詳細画面で全文に届くようにする。
• text-overflow の任意の文字列は、1行の省略で使える新しい選択肢。対応していないブラウザでは「…」になる前提で指定する。

一覧や管理画面の設計で、実データに強い画面の作り方を一緒に考えたいときは、お気軽にご相談ください。

参考

• Chrome 157 Release Notes（Chrome Platform Status）
• Stable Channel Update for Desktop（Chrome Releases、2026年11月3日）
• CSS Overflow Module Level 4（Editor’s Draft）
• text-overflow CSS property（MDN）
• line-clamp CSS property（MDN）
• Understanding SC 1.4.12 Text Spacing (Level AA)
• Understanding SC 1.4.4 Resize Text (Level AA)
• HTML Standard: The title attribute
• Overflow content（Carbon Design System）
• Wrapping and Truncation（SAP Fiori Design System）
• Truncate（PatternFly）
• Explore text properties（Figma Learn）