長い文章を省略して表示する方法を紹介します。
１行の場合
text-overflow: ellipsis;
・white-space を nowrap に設定する必要があります。
・overflow を hidden に設定する必要があります。
複数行の場合
display: -webkit-box; -webkit-line-clamp: 3; //表示する行数を指定 -webkit-box-orient: vertical;
＜対応ブラウザ（line-clamp）＞
・IE以外のブラウザはほぼ対応しています。
Can I use
WordPress の場合
■the_excerpt を使用する
投稿ページの本文を抽出して、長い文章を省略するときに利用します。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_excerpt(); ?> <?php echo get_the_excerpt(); ?> <?php endwhile;endif; ?>
省略する文字数を変更したい場合は、次のコードを functions.php に記載します。
function twpp_change_excerpt_length( $length ) {
return 50; //抜粋する文字数
}
add_filter( 'excerpt_length', 'twpp_change_excerpt_length', 999 );
省略記号[…]を変更したい場合は、次のコードを functions.php に記載します。
function twpp_change_excerpt_more( $more ) {
return '......'; //省略記号にしたい文字
}
add_filter( 'excerpt_more', 'twpp_change_excerpt_more' );
「続きを読む」とリンク付きの文字を入れる
function twpp_change_excerpt_more( $more ) {
$html = '<a href="' . esc_url( get_permalink() ) . '">[...続きを読む]</a>';
return $html;
}
add_filter( 'excerpt_more', 'twpp_change_excerpt_more' );
■wp_trim_words を使用する
タイトルなど、本文以外でも省略したい場合に使用できます。
<?php echo wp_trim_words( get_the_title(), 30 , '…' ); ?>
第１引数は必須項目。切り取りたい文字列を指定します。
第２引数は抽出する文字数。デフォルト値は55文字に設定されています。
第３引数では切り取った文字列の後に追加したい文字を指定できます。デフォルトでは「null」です。
