( ) CSS PHP

【PHP/CSS】任意の文字数以上を省略する方法

ブログ等でよく見かける、一定の文字数以上になったら「…」等で省略する方法です。

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

1行限定なら、CSSだけで対処可能です。
コンテンツによって要素が可変する inline-block などでは使用できません。

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

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

特定の行数で文字を省略したい

CSSを使う方法

display: -webkit-boxを使います。こちら最近初めて知ったプロパティなのですが、youtube でもこの方法で省略していたので、天下のグーグルさんが使っているならいいだろう…と笑

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

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

参考:https://developer.mozilla.org/ja/docs/Web/CSS/box-flex

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

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

PHPを使う方法

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のプロパティが全てのブラウザで実装されれば、そちらで完結させることができるかもしれません。

関連記事

Leave a Reply