長すぎるタイトルなどの文字列を3点リーダーで省略する

アクセスランキングを表示するのにPHPであれこれやっていますが、表示される記事タイトル+サイト名+サイトの概要が長すぎて困ってます。

$title = mb_substr($this_data[1],0,200);

このへんが問題なんだろうと思い、調べてみた。
文字列の一部を取得(substr, mb_substr)

substrで文字列を拾って、200のところでどれだけの文字数か(1バイトで)決めてるらしい。
試しに200を50にして再構築したら、たしかにすごく短くなった。でも、へんな◆に疑問符のマークが消えないなあ。なんだろ、これ?文字化け?

そういえば、スタイルシートで文字を省略するやつもあったよな・・・。

こちらを参考にしてみた。
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(...)にする方法いろいろ

一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りません。表示領域がより小さくなればたちまちはみ出したり不自然な見切れ方をするなどのレイアウト崩れが発生してしまいます。

はい、おっしゃる通りです。まさに今その状態です。

text-overflow は CSS3 の機能の一つとして定義されていますが、元々は Internet Explorer6 の独自仕様として策定されたものであり、それが後に CSS3 に採用されたものなので現状全ブラウザで使用することが出来ると言えます。

それは頼もしいかぎりです。
では、こんなカンジで。

省略したい所のタグ {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

あ~、スッキリした。

最終更新日:

このエントリーをはてなブックマークに追加

広告