CSSもだんだんと発展してきてCSSだけで文の省略ができるようになりました。今回は、CSSでの長くなった文を…にする方法と、その他CSS以外でやる方法をまとめました。
パフォーマンスの観点からだとそこまで差は出ないと思いますがCSSでやったほうが早いのではないかと思っています。また、PHPやJSなどで文を省略してしまうと実際の文字列を操作しているのでSEO的に若干の影響はあるのではないかなと思っています。
とりあえず今のところは好きな方法で実装すれば今のところ大丈夫かと思います。
1.CSS 一行を…に省略する
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
こちらはどのブラウザもサポートしているので、使用しても問題ないと思います。ただ複数行になる場合はこの方法は使用できませんのでご注意ください。
使用箇所としてはタイトルとかで使用するのがいいかと思います。
2.CSS 複数行を…に省略する
・webkit-line-clamp IE,Firefox未対応
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow:hidden;
}
こちらはChromeとSafariしか対応していないため、IE,Firefox対応が必須な場合は避けたほうがいいです。ただ便利なので早くどのブラウザでも使用できるようになって欲しいですね。
-webkit-line-clampで行数を指定します。
・before,after要素 推奨
.ellipsis {
position: relative;
height: 80px;
overflow: hidden;
line-height: 20px;
}
.ellipsis:before, .ellipsis:after {
position: absolute;
background: #fff;
}
.ellipsis:before {
content: "･･･";
bottom: 0;
right: 0;
}
.ellipsis:after {
content: "";
width: 100%;
height: 100%;
}
こちらは高さを決め打ちする方法です。before要素では・・・を、after要素は・・・を隠すために使用しています。
仕組みとしては、文のあとに常にafter要素があり、コンテンツの幅よりも文が短くなった場合のみafter要素が見えるようになり・・・を覆い隠すというふうになっています。
どのブラウザでも使用できるのでCSSだけで複数行の文を省略したい場合は、この方法がおすすめです。
3.JS 文字列を省略し、…を追加する
.substr{
visibility:hidden;
}
$(function(){
var wordLength = '50';
var afterTxt = ' …'; // 文字カット後に表示するテキスト
$('.substr').each(function(){
var txtLength = $(this).text().length;
var txtTrim = $(this).text().substr(0,(wordLength))
if(wordLength < txtLength) {
$(this).html(txtTrim + afterTxt).css({visibility:'visible'});
} else if(wordLength >= txtLength) {
$(this).css({visibility:'visible'});
}
});
});
substrクラスを指定した要素に対して指定の文字数を超過した場合は、…を追加するという方法をとっています。substrを指定した要素には最初visibility:hiddenを指定し、上記の作業が終わった段階でvisibility:visibleに戻してあげます。
参考：
http://black-flag.net/jquery/20121010-4227.html
4.php 文字列を省略し、…を追加する
・phpで
function trimword($str, $length=20, $append="...") {
if (mb_strlen($str) > $length) {
$str = mb_substr($str, 0, $length, 'UTF-8');
return $str . $append;
}
return $str;
}
<a href="<?php the_permalink(); ?>" class="title">
<?php echo trimword($post->post_title); ?>
</a>
phpの機能だけで実装する場合はmb_substrが文字を丸める場合は便利です。指定の文字数で丸めたら・・・を追加しreturnするといった流れになっています。フロント側では、echo trimword($post->post_title)で投稿タイトルを省略しています。今回は参考のためにWordpressの投稿タイトルを代入しましたが、()内はお好きな文字列を入れていただけます。
・Wordpressで
<?php echo wp_trim_words( get_the_title(), 30 , '…' ); ?>
上記のコードを書くだけで省略して…を追加してくれます。簡単ですね。
まとめ
様々な方法で文字を省略することができますが、CSSでやるならCSSだけで、phpやJSでやるならその言語だけで行わないと後々のメンテナンスが面倒くさいことになります。ただ個人的にはCSSで全部できるようになってくれればと思います。
では。
