カードのタイトルが長いとき、末尾に「…」を付けることがあります。この記号を「［省略］」に変えたら、どこまでタイトルが読めるのか。幅も文章も同じカードを2枚並べて比べてみました。
カードの幅を変えて比べる
「カード幅」のスライダーで2枚を同時に調整できます。「短いタイトルで試す」を押すと、幅に収まるときの表示も確認できます。任意の文字列に未対応のブラウザでは、右側も「…」で始まります。「任意の文字列の見本を表示」で、比較用の見本に切り替えられます。
任意の文字列は、標準の指定のあとに書く
.card-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow: "［省略］";
}文字列を指定できる環境では、末尾に「［省略］」が出ます。未対応の環境は最後の行を無効な宣言として無視し、その前のellipsisを使います。上のデモでは比較のため、左のカードをellipsisに固定しています。
250pxだと、記号が長いぶん本文が短くなる
今回の見本では、左側は「小さなお店のWebサイトで…」まで。右側は「小さなお店のWebサ［省略］」まででした。250pxのカードの内側に記号も収めるので、目印を詳しくするほど読める文字が減ります。短い見出しに切り替えると、幅に収まる場合はどちらも省略されません。
僕なら、記事一覧や制作実績のカードではまず「…」を使います。見出しの後半に大事な情報がある場合は、記号を考える前に、伝えたい言葉を先頭へ移せるかを見直します。
検証日 2026年11月6日。内蔵ブラウザで「…」へのフォールバックと、幅・タイトルの切り替えを確認しました。「［省略］」は比較用の見本で、この環境ではCSSの任意文字列による描画を確認していません。Chrome 157の対応は公式リリースノートに記載されています。