Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
52
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

導入

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

参考リンク

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
52
Help us understand the problem. What are the problem?