システム開発ブログ

Webコンサルティング部

HTML全般

文字数制限をしないでCSSだけで「...」を表示する

こんにちは、デザイナーの橋本です。

h1タグはユニークでなければいけませんが、そのためサイトによってはとても長くなる事もあります。
特にECサイトでは、商品のカテゴリやブランド名、そして商品番号等必要なものは全て出したいものです。

しかし、ページの構成によっては、スペースも限られる事も多く、デザイナーの悩みの種でもあります。

レイアウトを崩さないためには、以下の方法を思いつきます。
1)領域から出た部分は非表示にする
2)プログラムで文字数を制限して、末尾に「...」をつける。

1)は、テキストが唐突に切れてしまうので見た目的にスマートではありません。
2)は、テキストが省略されている事が見たでわかりますが、せっかくの文字が全部書き出されないため
SEO的には好ましくありません。テキストの大きさが可変なサイトにも適しません。

以上の不満はCSSの「text-overflow」を使えば簡単に解消されます。

●省略符号「...」を表示する

h1 {
 text-overflow: ellipsis; 
}

●省略符号「...」を表示しない

h1 {
 text-overflow: clip; 
}

●応用

h1 {
 width: 450px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 -webkit-text-overflow: ellipsis;
 -o-text-overflow: ellipsis;
}

スタイル指定のポイント
・表示領域を指定(width: 450px;)
・改行禁止(white-space: nowrap;)
・表示領域外非表示(overflow: hidden;)
・末尾「...」表示(text-overflow: ellipsis;)
・WebKit対応(-webkit-text-overflow: ellipsis;)
・Opera対応(-o-text-overflow: ellipsis;)

下の2点については、記述が無くてもOpera 12.11、safari 5.17 で表示に問題が無い事を確認しています。

これなら、必要なテキストはHTMLに書き出されているし、テキストが省略されている事もわかります。
しかも簡単に対応が出来るので、便利に使えますね。

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ