導入

PHPerにとって丸め処理の定番と言われれば、こんなコードを思いつきますよね。

$str = mb_strimwidth($str, 0, 10, '…', 'UTF-8');

しかし出力結果が意図したとおりになるためには、以下の条件が揃っている必要がありました。

等幅フォントを使用している
半角幅になる特殊なマルチバイト文字を使用していない（半角カナなど）

実はこれらの問題を鮮やかに CSS3 だけで解決する方法がありました。

実装

以下のようなクラスを適用すれば実現できます。

CSS

.trim {
    
    /* 任意 */
    min-width: 100px; /* 最小表示幅の指定 */
    max-width: 200px; /* 最大表示幅の指定 */

    /* 必須 */
    white-space: nowrap; /* 空白で改行させない */
    overflow: hidden; /* はみ出た部分を表示しない */
    text-overflow: ellipsis; /* はみ出た場合に「…」を表示 */
    -webkit-text-overflow: ellipsis; /* はみ出た場合に「…」を表示 (Safari用) */
    -o-text-overflow: ellipsis; /* はみ出た場合に「…」を表示 (Opera用) */
    
}

※ インライン要素が対象の場合、display プロパティの値を inline-block または block に設定する必要があります。

SEO面での問題点（？）

.trim {
    overflow: hidden;
    text-overflow: ellipsis;
}

私が調べた限りでは、この記述が直接SEOペナルティに結び付くという主張をしている人は見られませんでした。安心して使えると思います。むしろ 文字列を削らずにそのままHTML中に残せる ので、優良な検索結果に結びつきやすいと考えることも出来るかもしれません。

導入

実装

SEO面での問題点（？）

参考リンク