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

さ / By

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

１行のみを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で表示文字数制限する方法はいかがでしょうか。
    長文はできるだけ控えて、短文で印象を与えるのが一番離脱率が低いかなと思います。
    興味のある人は続きを読みたくなるので、こういった表示はスマホ版でよく使われます。