【html/css】の改行に手こずる

久々にwordpressというか、html/css小ネタが発生しました。

ある日、更新をしたレコードのリストを眺めていると、字間がやたらと空いている場所を発見しました。

原因はすぐに分かりました。本文中のカッコに対してspanクラスを付与しカッコ内のフォントウェイトを変更していたためです。
htmlの法則では、spanで囲まれた部分はどうやら原則として改行しないようで、CSSでtext-alignをjustifi（均等配置）としていたため、１行に入りきらなかったカッコ内の文が丸ごと次の行へと送られ、カッコ前の部分がjustifiによって均等に配置されて、無駄に大きな文字送りとなってしまったようです。これは紙の本などでも、幅の狭い文面に長い英単語が入った時などに起こりがちな現象です（そのためのハイフネーションです）。

早速「span内で改行」などと検索してみますが、どうも出てくるのは「気持ちの良いところで改行するためにspanで囲う」というような記事ばかりで、spanで囲まれていても通常通り改行させるような記事はなかなか見当たりません。
そんな中で気になったのがwbrタグです。は改行が必要なときにはここでしてね、というある種のハイフネーションタグで、たいていは諸々のCSSと組み合わせて使うようです。
このspanとwbrは、デザインされたレイアウトを死守するためにどのように使うか、相当に議論や研究、実証が行われているようでした。
しかし…しかし、しつこいようですが私が欲しているのは、たとえspanで囲まれていたとしても通常の文章のように改行してほしいだけなのです。

まず考えたのがtext-align: leftとして左寄せとしてしまう方法です。これですとたとえカッコ内が次の行へ送られたとしても、カッコ前の文は左寄せとなりますから、だらしのない空白は生まれません。
ただ、この方法ではカッコの無い、つまりspanの出てこない文であっても全て左寄せとなってしまいますし、そもそも複数行となった場合に右側が揃わないので少なからず…いや大いに残念です。

そこで、ものは試しとspanで囲まれた文の適当なところにwbrタグ入れてみました。すると（ある意味当たり前ですが）wbrタグを入れた場所できちんと改行されました。つまり、wbrタグを使えばspan内であっても改行させることができる、というところまでは分かりました。
問題はwbrをどこに入れるかです。画面のバランスを見ながら手入力するのは、労力を考えれば馬鹿げたことですし、そもそも全ての人が同じウインドウサイズで見るわけがないのですから実用になりません。

こうなったらダメ元と、論理的に考えると何も起こりそうに無いのですが、span閉じタグの直前にwbrを入れてみることにしました。

<span>……<wbr /></span>

気持ちとしては「span内のどこかで改行あるかも、よろしく」という意思表明だったのですが、なんとその念はhtmlにも伝わったようで、ほぼ完璧に私の希望通り、つまりspanで囲まれている部分でも必要であれば改行する、という動作となりました。はて…どうしてそうなるのかは未だよく分かりませんが。確認はしていませんが直後にを入れても大丈夫そうな気がします。
もともとwbrタグは、「必要であればココで改行」ですから、カッコが終わっても改行が必要なければそのまま文は続いていきます。余程変なところへ入れなければ副作用も無さそうです。

念のためEdgeとChromeで動作確認をして、最後にwordpressファンクションの置換部分を、からへと書き換えて、めでたく解決しました。おそらくですが…