Zenn
😈

<wbr>を知っているか

2022/12/27に公開
CSS
HTML
wbr
tech

HTMLで改行する場所を指定する方法を紹介します.

エンジニアには今日も悪魔がささやく

こんなデザインを見ると実装に困るのは私だけだろうか？

もちろんHTMLは想像に容易くこんなところだろう.

<div>
  <h2>お願い</h2>
  <p>
    こちらの都合で、急なお休みをいただく事がございます。ご了承ください。
  </p>
  <img src="https://picsum.photos/1000" alt="" />
</div>

さて問題は<p>タグにあてるCSSだ.

「こちらの都合で、急なお休みをいただく事がございます。ご了承ください。」という真ん中寄せの文章.

これは,文章が入り切らない場合に読みづらくないようにいい感じに改行させたものの別に必ず改行するわけではないといったニュアンスの込められたデザインである.（デザイナーがどこまで考えているのかはわからないのだが）

全体を見ると下にwidth: 100%;と思われる画像が存在しており,外の<div>にpaddingを当てるわけにはいかない.

「<p>タグを3つに分けるか,<br />を挟むかして,絶対に改行する仕様にしてしまおう.そんな細かいところ誰も気が付かないって」と今日も悪魔がささやく.

そんなときに<wbr />を使おう

<p>
  こちらの都合で、<wbr />急なお休みをいただく事がございます。<wbr />ご了承ください。
</p>

このように<wbr />を挟むことで,改行の位置を指定することができるようだ.

そして,これをうまく動作させるには,CSSは以下のようにする必要がある.

p {
  white-space: pre;
}

頭の中を具現化できた.

Discussion