前回コンテンツ幅による文章改行でのレイアウトを綺麗に実装できるコーディングのTipsを紹介しました。
こちら 「セマンティックな改行のススメ」
前回はspanタグで囲ってdisplay:inline-block;で改行する方法でしたが、今回もう一つ別の方法を紹介したいと思います。
wbrタグってご存知ですか？
「WBR」とは「Word Break」の略で、改行をしてもよい箇所を指定するタグです。
CSSにもword-breakというのがあるのをご存知の方も多いかもしれません。
通常のbrタグであれば指定している箇所のみが改行されますが、テキストなどがコンテンツ幅に収まりきれない場合はbrタグ以外の箇所でも幅に合わせてテキストが一文字づつカラム落ちしていきます。
ここでbrタグの代わりにwbrタグを使ってみます。
改行（カラム落ち）をさせたい箇所に＜wbr＞を入れて、（pタグなど）その要素に対してCSSでword-break:keep-all;を指定します。
そうするとタグを入れただけでは改行はされません。
ですが＜wbr＞から次の＜wbr＞までのテキストがコンテンツ幅に入らなそうな場合、その中身を丸ごと改行してくれて、一文字づつなどの改行はしなくなります。
これにより前回のspanタグをdisplay:inline-block;に指定した時と同じような挙動を実現することができます。
※CSSでword-break:keep-all;を指定するだけである程度の「、」「。」を理解してそこからの改行をしてくれるので紛らわしくないように今回は「、」「。」を削除しました。
wbrタグの注意点
ただし、このwbrタグは「途中で改行を許さない」というタグになりますので、
＜wbr＞前後のテキストが長すぎる場合、コンテンツ幅がその長さより小さくなればテキストがカラム落ちする逃げ場がなくなりコンテンツ幅を突き抜けてしまいますので注意が必要です。
あくまでも崩したくない文節ごとに細かく切り分けて仕込んでおくことが大切です。
まとめ
wbrタグやCSSのword-break:keep-all;は状況に合わせてうまく使えば簡単に理想の改行を実装することができますので、色々と試してみていただけたらと思います。
ではまた次回にお会いしましょう。
