いつの間にか iOS で wbr が効かない

<wbr> を使ったことのない人には縁のない話です。

拝啓、改行される位置をこだわりたい人へ

「読めりゃいい」という人種には決して起こり得ない「ここ以外で改行されるのはイヤだ」という文字の美学。概ね行間で演出したい「間」に重きを置く変態はこういうの好きですね。

文節で改行されるのはいい、
言葉の途中で分断するな。
気持ち悪いだろう。

ということです。
そもそも日本語のブラウザ表示でワードラップなんてしてくれるワケ無いんで、そんな時に使うのが <wbr>です。
サンプルコードをご覧ください。

<p>
  <nobr>
    熊谷あまりにいとほしくて、いずくに刀を立つべしともおぼえず。<wbr>
    目もくれ心も消えはてて、前後不覚におぼえけれども、<wbr>
    さてしもあるべき事ならねば、泣く泣く首をぞかいてんげる。<wbr>
  </nobr>
</p>

<nobr> は改行を無効にするタグです。<br /> が無効化され、文字列は改行する事なくブロックを突き破ってウィンドウの右奥へ猪突猛進します。
その中で「ここで改行してほしい」ってところに入れるのが <wbr> 。

ウィンドウのサイズによって表示できる 1 行の文字数は変わると思いますが、<wbr> を使う限り、中途半端なところでは自動改行せず、<wbr> のあるところだけで改行してくれます。

おかげで美しい文字の組み方ができる（かもね）。

ある日突然 iPhone で改行されなくなった。

この <nobr><wbr></nobr> が iPhone Safari で効かなくなってしまいました。

もうこの技は使えん。
PC ブラウザでは効いているのに理不尽である。

対処方法あります

まずは改行を抑制するCSSを書いておきます。

.nowrap { word-break: keep-all; }

次にソースから <nobr> を取り、親要素に先ほどの CSS を効かせます。
もう <nobr> が役に立つことはなかろう。

<p class="nowrap">
  熊谷あまりにいとほしくて、いずくに刀を立つべしともおぼえず。<wbr>
  目もくれ心も消えはてて、前後不覚におぼえけれども、<wbr>
  さてしもあるべき事ならねば、泣く泣く首をぞかいてんげる。<wbr>
</p>

これで PC / スマホ 両方とも欲しいところで改行されます。