固定幅ブロックに長い文字列を流し込むときレイアウトを崩さず、うま〜く納める方法
固定幅のブロックがあったとして、たとえばそこへ "abcdefghijklmnopqrstuvwxyz" という文字列を流し込むと、文字列は幅指定を無視してブロックを突っ切ってしまう。あるいは「あいうえおかきくけこ」という文字列を流し込むと、自動改行が発生してブロックの高さが変わってしまう。
<p style="width:5em;border:solid 1px red">abcdefghijklmnopqrstuvwxyz</p> <p style="width:5em;border:solid 1px red">あいうえおかきくけこ</p>
abcdefghijklmnopqrstuvwxyz
あいうえおかきくけこ
こうしてみよう。
<p style="width:5em;border:solid 1px red;height:1em;overflow:hidden">abcdefghijklmnopqrstuvwxyz</p> <p style="width:5em;border:solid 1px red;height:1em;overflow:hidden">あいうえおかきくけこ</p>
ブロックに納まる分だけ文字列が表示され、納まらなかった部分は表示されない。ブラウザ上でコピー & ペーストすると文字列全体を取得することができる。
mb_strimwidth() にご用心
PHP には mb_strimwidth() という関数がある。指定した文字数で文字列をカットしてくれる便利な関数だ。
<?php echo mb_strimwidth('abcdefghijklmnopqrstuvwxyz', 0, 10, '...');
abcdefghij...
上記の overflow:hidden の代わりにこの関数を使ったほうがよさそうに見える。ところがこの関数にはデメリットが２つある。
１つは、この関数がどこでカットするかを決めるのは文字数であり文字列の幅ではないこと。そのため、小文字の i や l など幅の細い文字が連続した場合は、文字列の幅は予想以上に細く見えることがある。ひどい場合では、幅広の文字を使ったとき、オーバーフローが発生してブロックの幅を変えてしまう。（データベースなどから引っぱってきた文字列で埋めるなどの場合は）文字列の幅が細くなるか太くなるかは事前に予測することができない。それに、文字１つ分の幅はブラウザの設定によって変わるのだ。
もう１つは、重要なキーワードでも容赦なくカットされてしまうため、SEO的な狙いを外してしまう場合があること。たとえば EC サイトで「スワロフスキーシャンパングラス」を販売しているとして、この商品名がブロックに収まらないからといって10文字でカットしてしまうと、残りは「スワロフスキーシャン」だけとなり、商品ページから「シャンパングラス」「シャンパン」「グラス」といったキーワードが消えてなくなってしまう。
上記の overflow:hidden なら、文字の幅がどんなに長くなろうと短くなろうとブロックの大きさは変わらないし、重要なキーワードは一文字も損なうことなくしっかりソースに埋めこまれているので、検索エンジンに捕捉してもらえるし、ブラウザの検索機能でもきちんとヒットする。ただし、overflow が発生して文字列の一部がカットされたときでも、そうと分からないのが欠点。
