text-overflow に任意の文字列を指定して「…」の代わりに「(続きを読む)」を出す

どんな時に使う？

カードのタイトルや一覧の1行テキストを切り詰めるとき、「…」ではなく「(続き)」「→」など意味のある印を出したい場合。これまで Chrome では JavaScript で文字幅を測るか、疑似要素を被せるしかなかった。

コード

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* 未対応ブラウザ向けの保険 */
  text-overflow: " (続き)";     /* 対応ブラウザではこちらが勝つ */
}

• 文字列は内容ボックスの内側に描かれ、その分だけ本文が短くなる。ボックスが文字列より狭いと、文字列自体も切れる。
• 未対応ブラウザは文字列の行を無効として捨てるので、先に ellipsis を書いておけば「…」に戻るだけで壊れない。
• 従来どおり、overflow: hidden と white-space: nowrap がないと何も起きない（はみ出しを作るのは別のプロパティ）。
• text-overflow: ""（空文字列）にすると、文字の途中ではなく文字と文字の境目で切れる clip として使える。

注意点・対応状況

• Chrome 157（2026-11-03 安定版）から対応。Firefox は 9 から対応済み。Safari は未対応。
• 効くのはインライン方向（横書きなら行末）のはみ出しだけ。複数行の line-clamp の末尾には使えない。
• 入力欄など編集できる要素では、ブラウザによってフォーカス中は clip 扱いになる。

出典

• @sanyampunia（2026-11-04）
• 参考: MDN text-overflow developer.mozilla.org