Help us understand the problem. What is going on with this article?

mb_strimwidth関数なんて必要なかった(?)

More than 3 years have passed since last update.

導入

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中に残せる ので、優良な検索結果に結びつきやすいと考えることも出来るかもしれません。

参考リンク

mpyw
古い記事はそのまま参考にしないようにご注意ください
synapse
Synapseは、オンラインサロンサービスにおけるパイオニアとして、かつて存在していたスタートアップです。
https://synapseam.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away