CSSのtext-overflow: ellipsisは一行のはみ出しを省略記号で示す

text-overflow: ellipsisだけを指定しても、省略記号が出るとは限りません。一行で表示する範囲を決め、文字を折り返さず、範囲外を隠したうえで使います。

一行の項目名を省略する基本形は、white-space: nowrap、overflow: hidden、text-overflow: ellipsisの組合せです。さらに、要素が伸び続けないよう、widthまたはmax-widthなどで表示範囲を決めます。

ellipsisが働く条件を四つに分ける

W3CのCSS Basic User Interface Module Level 3では、text-overflowを、block containerの行端からinline内容がはみ出し、overflowがvisible以外であるときの表示方法として定めています。ellipsisは、隠された内容を表す省略記号を行端へ表示します。

一行の省略表示には、次の四つの条件が関係します。

どれが欠けたかを分ければ、「ellipsisが効かない」を一つの原因として扱わずに済みます。要素の幅が内容に合わせて広がるなら、そもそも文字ははみ出しません。折り返されるなら、行端で省略せず次の行へ進みます。overflow: visibleのままなら、範囲外の文字がそのまま描画されます。

一行の項目名には最小の組合せから指定する

次は、記事一覧の項目名を一行へ収める説明用の仮例です。

<a class="article-name" href="/example/">
  とても長い記事名がここに入ります
</a>

.article-name {
  display: block;
  max-width: 20rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

display: blockは、linkを幅のあるblock containerとして扱うために加えています。実際のlayoutがflex itemやtable cellなら、親要素の幅計算も確認してください。子要素へ四つを指定しても、親が内容に合わせて広がれば、はみ出しは起きません。

最初から多くの指定を重ねず、要素の実際の幅、折返し、overflowのcomputed valueを順に見ます。開発者用toolで対象要素を選び、枠の右端を文字が越えているかを確認すると、原因を絞れます。

省略表示と本文の削除を混同しない

text-overflowが変えるのは表示です。HTMLにある文字列を短くしたり、serverから送るdataを削ったりする機能ではありません。画面で見えない部分も文書には残るため、秘密にしたい情報を隠す目的には使えません。

反対に、表示を省略しただけで全文への手段がなくなると、似た項目を区別できない場合があります。商品名、file名、記事名など、末尾が判断に必要な内容では、詳細ページへ進めるlink、展開操作、別の全文表示を用意します。

省略記号へmouseを重ねた場合だけ全文を見せる設計に限定すると、keyboardやtouch操作で確認しにくくなります。どの入力方法でも全文へ到達できる経路を残してください。

複数行の高さ制限とは分けて考える

この組合せは、一行で折返さない文字列の行端を省略するためのものです。二行または三行だけ表示したい要件を、text-overflow: ellipsis一つで解決しようとしないでください。

複数行の本文では、文章を短く編集する、概要を別fieldとして持つ、詳細ページへの導線を明示する方法も検討します。表示上の切取りと、読者へ伝える文章の範囲は別の判断です。

制作を外部へ委託する場合は、「長い文字を省略する」だけでなく、対象となる要素、表示幅、一行か複数行か、全文へ到達する方法を渡します。CSSを書く作業と、どの情報を一覧に残すかを決める責任は同じではありません。

最初の一手は、省略記号が出ない要素を一件だけ選び、実際の幅、white-space、overflow、text-overflowの四つを確認することです。四条件がそろった後に、全文へ到達できる操作も確かめてください。