📄
なぜか文末に<wbr>を入れると不自然な位置で改行されなくなる
Chrome 131 で、テキスト末尾に括弧 )
などの記号がある場合に、特定のウィンドウ幅で不自然な位置に改行が入る現象が起きる。
検証環境
- ブラウザ: Chrome 131
- 検証ページ: https://hata6502.github.io/suffix-wbr/
- 検証用テキスト:
庭園の小さな池に<b>コイ</b>が泳いでおり池の周りには緑の植栽と岩が配置されている(末尾に括弧)
テキストの特徴
- 文中に
<b>
などのインライン要素を含む - 末尾に括弧
)
などの記号がある
改行の挙動
※ OS やフォントによって、改行位置が変化するブラウザウィンドウ幅は変わると思う。
ウィンドウ幅 760px 以下
ウィンドウ幅 761px ~ 768px
ウィンドウ幅 769px 以上
<wbr>
タグを末尾に挿入した場合
テキストの末尾に <wbr> を入れると、「コイ」の直後で改行されなくなった
ウィンドウ幅 760px 以下
ウィンドウ幅 761px ~ 768px
ウィンドウ幅 769px 以上
<wbr>は文中に入れて改行位置を調整するのが一般的な使い方だと思っていたが、
文の末尾に入れても改行位置を調整できるのは意外な使い方かもしれない。
Discussion