WordPressなどを使って投稿した文章に対して一定文字数以上達したら文字数制限を掛けたい時があります。
一般的にはPHPなどのプログラム言語使って文字数制限をかけることが通常ですが、CSSでもちょっととした文字数制限を実装することができます。
今回はCSSを使った文字数制限の実装方法について紹介します。
【デモ】CSSを使った文字数制限2パターン
まずはこちらのデモをご覧ください。
See the Pen 【CSS】CSSを使った文字数制限 by ayukat (@ayukat) on CodePen.
CSSを使った文字数制限を2パターン作ってみました。
1番目の実装方法はtext-overflowプロパティにellipsisという値を使ったやり方です。2番目の実装方法はCSSの疑似要素（after）を使ったやり方です。
この2つのやり方は実際にはHTML上にある文字に対して制限はかかっておらず、（...）を表示させて文字数制限をしているように表現しているだけです。
なのでHTML上には制限しているつもりになっていた文字が存在しています。
text-overflow: ellipsis;をつかった文字数制限
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}CSSの解説
文字数制限をかけたいタグに、「white-space: nowrap;」を使って、文字を改行しないようにさせます。
white-spaceプロパティは文字中のスペースや改行の表示方法を指定するプロパティです。
次に改行しなくなった文字が要素からはみ出てしまうので、「overflow: hidden;」を使ってはみ出た要素を非表示にさせます。
overflowプロパティは、はみ出た要素の表示方法を指定するプロパティです。
最後に「text-overflow: ellipsis;」を使って省略記号を表示させます。
text-overflow: ellipsis;とは
text-overflowプロパティは表示されない文字をどのように表現するか指定するプロパティです。
値に「ellipsis」を指定すると省略記号（...）を表示させることができます。
text-overflow: ellipsis;を使って省略記号を表示させるには「white-space: nowrap;」と「overflow: hidden;」がセットで指定されていないと表示することができません。
またtext-overflow: ellipsis;は複数行に渡る文章には適応できず、1行目の最後にしか表示されません。なので複数行の文章時に表示させたい場合は別のやり方が必要です。
CSSの疑似要素（after）を使った文字数制限
text-overflow: ellipsis;では複数行の文章時に文字数制限ができませんが、CSSの疑似要素（after）を使った方法を使えば、複数行でも文字数制限を表現できます。
CSSの解説
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
position: relative;
height: 100px;
overflow: hidden;
padding-right: 8px;
}
p:after {
content: "…";
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
z-index: 1000;
}文字数制限を掛けたいタグに高さ（height）を指定して高さからはみ出た要素は非表示（overflow: hidden;）に指定します。
after要素を絶対位置指定させるので「position: relative;」で基準位置を指定し、「padding-right: 8px;」で省略記号（...）を表示させるスペースを作ります。
そしてafter要素には「content: "…";」を指定して省略記号を表示させ、「position: absolute;」で絶対位置指定します。表示位置は右下に表示させるため「bottom: 0; right: 0;」を忘れずに指定させます。
調整は必要になってきますがafter要素を使うことによって複数行に渡る文章の文字数制限もCSSのみで実装することができます。