📄

なぜか文末に<wbr>を入れると不自然な位置で改行されなくなる

2025/01/25に公開

Chrome 131 で、テキスト末尾に括弧 ) などの記号がある場合に、特定のウィンドウ幅で不自然な位置に改行が入る現象が起きる。

検証環境

  • ブラウザ: Chrome 131
  • 検証ページ: https://hata6502.github.io/suffix-wbr/
  • 検証用テキスト:
    庭園の小さな池に<b>コイ</b>が泳いでおり池の周りには緑の植栽と岩が配置されている(末尾に括弧)
    

テキストの特徴

  • 文中に <b> などのインライン要素を含む
  • 末尾に括弧 ) などの記号がある

改行の挙動

※ OS やフォントによって、改行位置が変化するブラウザウィンドウ幅は変わると思う。

ウィンドウ幅 760px 以下

末尾で改行される
Image from Gyazo

ウィンドウ幅 761px ~ 768px

「コイ」の直後で改行される
Image from Gyazo

ウィンドウ幅 769px 以上

改行されない
Image from Gyazo

<wbr> タグを末尾に挿入した場合

テキストの末尾に <wbr> を入れると、「コイ」の直後で改行されなくなった

ウィンドウ幅 760px 以下

Image from Gyazo

ウィンドウ幅 761px ~ 768px

Image from Gyazo

ウィンドウ幅 769px 以上

Image from Gyazo

<wbr>は文中に入れて改行位置を調整するのが一般的な使い方だと思っていたが、
文の末尾に入れても改行位置を調整できるのは意外な使い方かもしれない。

https://almap.hata6502.com/?fit=&show=&album=cf3cc66bde9bf8f27f1e03e35ade37f4

Discussion