私のコーデイングバイブル

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

目次

テキストの文字数が長いと、スマートフォンで閲覧したら見栄えが悪くなってしまうことがあります。
また、期待感が増したところで文字が「…」などで消えると、続きを読みたくなる心理が働きませんか？
そこで表示文字数を制限する方法を、ＣＳＳで解説したいと思います。

１行のみをCSSで文字制限

１行のみをCSSで文字制限する場合は、下記のように記述します。
1.overflow: hidden;で、表示領域外を非表示にします。
2.text-overflow: ellipsis;で表示領域の末尾を「…」にします。 
				
					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で表示文字数制限する方法はいかがでしょうか。
長文はできるだけ控えて、短文で印象を与えるのが一番離脱率が低いかなと思います。
興味のある人は続きを読みたくなるので、こういった表示はスマホ版でよく使われます。
©office-one-scene.com