SEOを意識している方であればH1タグなどを、テキストで表現したいと考える方は少なくないと思います。しかしH1に入力したテキストの文字数が長いと、スマートフォンで閲覧したら見栄えが悪くなってしまうのが悩みとなりますよね。
今回はそんな文字数問題を解決するために、cssを使ってテキストの文字数を制限する方法を紹介していきます。
cssで文字数制限
それではcssを使ったテキストの文字数を制限する方法ですが、下記のようにスタイルを指定すると可能です。
h1 {
width: 360px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
} まずoverflow:hidden;を指定して、表示領域外を非表示に設定します。
次にtext-overflowプロパティを指定すると、表示領域にあるれた内容をどのように見せるか設定できます。今回は値をellipsisを指定することで、末尾を…に指定しています。
他の値として、clip・fade などもあるので、ご自身でどれが良いか選んでいただければと思います。
※実際のHTMLコードは省略されていないので、見た目だけ省略されています。
ただしこの方法には1つだけ問題があります。
それはテキストの文字数を制限が適用できるのが1行だけというこうです。
2行目や3行目で文字数制限をする場合には、この方法は使うことができません。
複数行で文字制限をする場合
次に複数行で文字数制限をする場合ですが、下記のように指定します。
h1{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
} display: -wevkit-box;と指定すると文字数制限をすることができます。
行数を指定するには、-webkit-line-clamp: ;で数字で行数を指定します。
ただし対応していないブラウザもあるので注意が必要です。
ブラウザに依存しなく安全に複数行で文字数制限をしたい場合には、JQueryやPHPを使って文字数制限をした方が確実かもしれないですね。
今回はCSSで省略する方法なので、JQueryやPHPを使ったテキストの文字数を制限する方法は別の機会に紹介したいと思います。
cssを使ってテキストの文字数を制限をする方法まとめ
cssを使ってテキストの文字数を制限をする方法について紹介してきましたが、如何だったでしょうか。
個人的には、1行限定でテキストを制限するtext-overflowプロパティを使った方法は、スマートフォン時に活用できるのでおすすめかなと思います。
問題は複数行ですが、wordpressなどで構築している場合には、PHPを使った方がベターかなと考えています。PHPを使ったテキスト制限をする方法に関しては、また別の機会に紹介したいと思います。
