【PHP/CSS】行数や文字数制限をして「…」で省略する方法

ブログ等でよく見かける、一定の文字数以上になった時や特定の行数に達したときに「…」等で省略する方法です。

1行を超えたら省略したい

CSS で対処することができます。
ただし、コンテンツによって要素が可変する inline-block などでは使用できません。

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

こちらは1行で文字が無くなっているように見えますが、実際に出力される文字はソースコード上にはすべて出てきてしまいます。もし、省略前の文字があまりにも長い場合は、出力される文字数をPHP等で制限しておくことをお勧めします。

2行、3行などの複数行で省略をかける時は、display: -webkit-boxを使います。Youtube でもこの方法で省略をしています(2019年現在)。

.text-ellipsis {
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
}

webkit の prefix がついていますが、MDN によると今後正式に実装する予定はないようです。

そのため今後使えなくなる可能性もあるという点だけご注意ください。その時にはおそらく別の形で省略できるようになるのではないでしょうか。また、display: flexではこの省略方法は実現できませんでした。

ちなみに、Internet Explorer ではうまく動作しません。とはいえ、省略されないだけで異常な崩れ方をするという訳ではないのでしっかり組んでいれば問題ないとは思います。大量のテキストを省略させる場合は、次に紹介するPHPの方法で文字をカットしておくとよいでしょう。

文字数で省略するのは css ではできません。ここでは PHP 関数 mb_strimwidth を使います。

$content = '省略したい文字';
echo mb_strimwidth( $content, 0, 400, '…', 'UTF-8' );

$content に入っている文字列の半角 0～400 文字までを抽出し、それ以降の文字は「…」で省略します。
もし、$content にHTMLタグが入るようなら strip_tags で除外してあげます（除外しないとタグを含めた文字数を省略してしまい、表示文字数がバラつくため）。

$content = '<p>省略したい<b>文字</b></p>';
echo mb_strimwidth( strip_tags( $content ), 0, 400, '…', 'UTF-8' );

例えば WordPress の本文（ウィジウィグエディタ）の中身なら、get_the_content()をそのまま突っ込むことで省略させたものを出力することができます。

echo mb_strimwidth( strip_tags( get_the_content() ), 0, 400, '…', 'UTF-8' );

半角と全角が入り混じると微妙に省略位置がずれるので綺麗ではありませんが、
今後CSSのプロパティが全てのブラウザで実装されれば、そちらで完結させることができるかもしれません。