さ

CSSで表示文字数制限する
三点リーダーとは・・・

テキストの文字数が長いと、スマートフォンで閲覧したら見栄えが悪くなってしまうことがあります。

また、期待感が増したところで文字が「…」などで消えると、続きを読みたくなる心理が働きませんか？

そこで表示文字数を制限する方法を、ＣＳＳで解説したいと思います。

１行のみをCSSで文字制限

１行のみをCSSで文字制限する場合は、下記のように記述します。

p {
 width: 100%;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 -webkit-text-overflow: ellipsis;
 -o-text-overflow: ellipsis;
}

複数行ををCSSで文字制限

display: -wevkit-box;と指定すると文字数制限をすることができます。

行数を指定するには、-webkit-line-clamp: 3;内の数字で行数を指定します。

複数行をcssで文字制限する場合は、下記のように記述します。

p {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 overflow: hidden;
}

CSSで表示文字数制限するまとめ

CSSで表示文字数制限する方法はいかがでしょうか。

長文はできるだけ控えて、短文で印象を与えるのが一番離脱率が低いかなと思います。

興味のある人は続きを読みたくなるので、こういった表示はスマホ版でよく使われます。