レスポンシブデザインで簡単に区切りよく改行したい時
1月にエンジニアとして働き始め、間も無く1ヶ月の新米です。
研修が終わり開発に参画し、画面デザインをしている際のおはなし。
レスポンシブデザインの際にシンプルなコードで簡単に改行出来るものを見つけました。
それがこちらです。
wbrタグとword-break: keep-all;
これです。実装は超絶簡単。
まず、CSSを書きます。
CSS
<style>
.break-keep-all {
word-break: keep-all;
}
</style>
で、それを適用させる
HTML
<div class="break-keep-all">
この後ろで改行したい<wbr />ここで改行したい
</div>
そうするとこうなる
view
この後ろで改行したい
ここで改行したい
これで終わりです。
つまりどういうことかを簡単に説明すると
◆ wbrタグ
テキストが親要素の幅に収まりきらない時、特定の位置で改行するように指示してる
◆ keep-all
単語を途中で分割しないようにしてる
この収まりきらない時ってのがミソです。
要は、改行が必要ない場合は改行されないのです。
画面幅のサイズで改行するかしないか判断してくれます。天才ですね。
この組み合わせで不自然な分割を避けながら特定の位置で改行してくれます。
注意点
めっちゃ便利なんですけど、もちろんデメリットもあります。
この指定をするとwbrタグの箇所でしか改行してくれなくなります。
なので、幅がさらに縮んだりしても、wbrタグの場所までは改行してくれません。
ビューが崩れます。ご注意を。
最後に
ざっくりとした説明になりましたが、異常がwbrタグを利用したレスポンシブ対応の手順です。
メディアクエリを設定するのめんどい、自分の思った位置で改行させたいって時に便利です。
最後まで読んでいただきありがとうございました。