CSS,JS,PHPで文の省略をして末尾を…にする色々な方法

CSSもだんだんと発展してきてCSSだけで文の省略ができるようになりました。今回は、CSSでの長くなった文を…にする方法と、その他CSS以外でやる方法をまとめました。

パフォーマンスの観点からだとそこまで差は出ないと思いますがCSSでやったほうが早いのではないかと思っています。また、PHPやJSなどで文を省略してしまうと実際の文字列を操作しているのでSEO的に若干の影響はあるのではないかなと思っています。

とりあえず今のところは好きな方法で実装すれば今のところ大丈夫かと思います。

1.CSS 一行を…に省略する

こちらはどのブラウザもサポートしているので、使用しても問題ないと思います。ただ複数行になる場合はこの方法は使用できませんのでご注意ください。
使用箇所としてはタイトルとかで使用するのがいいかと思います。

2.CSS 複数行を…に省略する

・webkit-line-clamp IE,Firefox未対応

こちらはChromeとSafariしか対応していないため、IE,Firefox対応が必須な場合は避けたほうがいいです。ただ便利なので早くどのブラウザでも使用できるようになって欲しいですね。
-webkit-line-clampで行数を指定します。

・before,after要素 推奨

こちらは高さを決め打ちする方法です。before要素では・・・を、after要素は・・・を隠すために使用しています。
仕組みとしては、文のあとに常にafter要素があり、コンテンツの幅よりも文が短くなった場合のみafter要素が見えるようになり・・・を覆い隠すというふうになっています。
どのブラウザでも使用できるのでCSSだけで複数行の文を省略したい場合は、この方法がおすすめです。

3.JS 文字列を省略し、…を追加する

substrクラスを指定した要素に対して指定の文字数を超過した場合は、…を追加するという方法をとっています。substrを指定した要素には最初visibility:hiddenを指定し、上記の作業が終わった段階でvisibility:visibleに戻してあげます。

参考:

4.php 文字列を省略し、…を追加する

・phpで

phpの機能だけで実装する場合はmb_substrが文字を丸める場合は便利です。指定の文字数で丸めたら・・・を追加しreturnするといった流れになっています。フロント側では、echo trimword($post->post_title)で投稿タイトルを省略しています。今回は参考のためにWordpressの投稿タイトルを代入しましたが、()内はお好きな文字列を入れていただけます。

・Wordpressで

上記のコードを書くだけで省略して…を追加してくれます。簡単ですね。

参考:

まとめ

様々な方法で文字を省略することができますが、CSSでやるならCSSだけで、phpやJSでやるならその言語だけで行わないと後々のメンテナンスが面倒くさいことになります。ただ個人的にはCSSで全部できるようになってくれればと思います。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。