文章構成に役立つnowrapとwbrタグの合わせ技

goto_jp 295views 更新:2014年10月10日

Webデザインにおいて、テキストは文中改行(<br>)せずに流し込み、ブロック幅での自然改行に委ねるのが美しいとされていますが、そのうえでも文章の区切りのいい位置で改行させたいケースはあると思います。

そこで役立つのか下記のような手法です。

<p style="white-space:nowrap">清秋の候、<wbr>皆様におかれましては<wbr>益々ご健勝のことと<wbr>お慶び申し上げます。</p>

「white-space:nowrap」は自然改行を発生させないCSSプロパティです。
これを入れるとテキストがブロック幅を突き抜けてしまうのですが、文章内の区切りの良い箇所に<wbr>タグを入れています。

<wbr>タグは「改行してもよい」という意味合いのタグで、メールアドレスなど長い半角英数の途中で自然改行を発生させる時のほか、こうしてnowrapの中でも使うことができます。

上記のコードで狭いブロック幅であれば必ず下記のような構成になります。

清秋の候、
皆様におかれましては
益々ご健勝のことと
お慶び申し上げます。

ただし当然ながら、最低の文字幅よりさらに狭いブロックでは文字が突き抜けてしまうので、使いどころの見極めは必要です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません