LoginSignup
25
28

More than 5 years have passed since last update.

テキストを指定した文字数または行数でカットする

Last updated at Posted at 2016-11-01

よくあるパターンまとめ。

文字数によるカット

HTMLエンディがちょうどカットしたい部分に来ると中途半端な文字列になるパターンがあるのでコード改良。
参照
https://blog.emwai.jp/wordpress/post-content_substr/

WordPress

the_excerpt()

the_excerpt() のデフォルトは55 単語「WP Multibyte Patch」 利用時のデフォルトは110 文字

日本語以外the_excerpt() の抜粋の長さを変更する場合は excerpt_length フィルターを使う。

custom_excerpt_length.php
function custom_excerpt_length( $length ) {
     return 20; 
}   
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

日本語の場合は「WP Multibyte Patch」」の設定を使う。

wpmp_conf.php
$wpmp_conf['excerpt_mblength'] = 110;

参照:http://eastcoder.com/code/wp-multibyte-patch/

wp_trim_words()

前述の the_excerpt() の文字数は一律での対応となるが、個別に対応したい場合やタイトルなどでも対応したい場合は wp_trim_words() 使う。
https://developer.wordpress.org/reference/functions/wp_trim_words/
ソース見るとわかるのですが、元になる文字列にHTMLタグや改行(\r\n)、タブ(\t)が含まれている場合削除された後に文字数カットします。

wp_trim_words.php
<?php
$text      = get_the_title(); // 元になる文字列
$num_words = 40;              // 単語数(WP Multibyte Patch 有効時は文字数)
$more      = '&hellip;';      // カットした文字列の末尾につける文字列

// HTMLエンティティを文字列に変換
$text = html_entity_decode( $text );
// 指定の文字数で切り出す
$text = wp_trim_words( $text, $num_words, $more );
// HTMLエンティティを元に戻す
$text = htmlentities( $text );

echo $text;

PHP

mb_substr()

文字数かつマルチバイトにも対応なら mb_substr() でいいよねってことで。
http://php.net/manual/ja/function.mb-substr.php

mb_strimwidth()

mb_substr() と違い、trimmarker がつく。丸める幅=文字数は trimmarker も含まれる。
http://php.net/manual/ja/function.mb-strimwidth.php

mb_substr(), mb_strimwidth() 両者とも(というかPHPなので当たり前ですが)HTMLタグや改行とかタブなどの制御文字は考慮しないので、それらが含まれる場合はよしなに処理しておく必要がある。

行数によるカット

指定行数で収めたいとき、文字列によるカットだとレスポンシブデザインやリキッドレイアウトなどいわゆるブラウザ幅によって1行あたりに入る行数が変わる場合に面倒。
こういうときは css or jQueryで。

1行なら text-overflow

text-overflow.css
p {
  white-space: nowrap;
  width: 100%;                   /* IE6 では width の指定が必要 */
  overflow: hidden;              /* "overflow" の値は "visible" 以外のものを指定する */ 

  -o-text-overflow: ellipsis;    /* Opera 9-10 */
  text-overflow:    ellipsis;
}

ベンダープレフィックスはsassなりcompassなりでよしなに。

複数行

正直コレが一番めんどくさいんだけど需要はあるのよね。
なお、ブラウザを限定していいなら webkit-line-clamp があるがIE対応してないので割愛。

trunk8 はjQueryプラグインで指定した要素に対して複数行で文字列をカット可能。

t8-default.js
$('#t8-default').trunk8();

1ページ内に2行だったり、3行だったりする場合は cssクラス分けたり、data属性指定したりなど工夫してみてください。

js.trunk8-sample.js
var trunk8 = $('.trunk8');
var lines = 2;
if( trunk8.length > 0 ){
    trunk8.each(function(){
        if( $(this).attr("data-line") ){
            lines = $(this).attr("data-line");
        } else {
            lines = 2;
        }
        $(this).trunk8({
          lines: lines
        });
    });
}

2016.11.8 追記
IE のみ <a> などのインライン要素に使った場合、trunk8 は正常に動作しません。
CSSなどで該当要素をブロックにしておきましょう。

2018.8.17 追記
Windows の Chrome(執筆時の最新版)でも再現。Mac版では正常に動作。解せぬ。

ie-trunk8.css
.trunk8 {
    display: block;
}

高さ取得してるからそりゃインラインではねって気もするけど、すごくもにょった。

25
28
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
28