HTMLの改行の仕様はとても複雑......。
なので調査録を残しました。
余計な装飾をしないように <div> を使っていきます。
デフォルト
<div>
東京都千代田区丸の内1-9-1ABCタワー32F
</div>
ただ文字を表示しただけだと、とても読みにくい...。
改善(1) 改行ポイントを手動で指定する
こちらの記事で言及されていた手法。
word-break: keep-all;+overflow-wrap: anywhere;+<wbr>
-
word-break: keep-all;で、日本語(CJK)のどこでも改行を禁止にする。 -
overflow-wrap: anywhere;で、範囲を超えていたら任意の場所で改行する。 -
<wbr>は改行してほしいポイントを教えてあげるもの。
これを組み合わせることで、
- その行内で表示できそうなら表示する
- 無理そうなら次の行へ表示する
- 1行に収まらなかったら、ボックス端で強制改行する
が実現できます！
<div style="word-break: keep-all; overflow-wrap: anywhere;">
東京都<wbr>千代田区<wbr>丸の内<wbr>1-9-1<wbr>ABCタワー32F
</div>
お～～とても読みやすい。
住所は項目ごとに登録なりしがちなので、間に <wbr> を入れてあげればOK。
半角スペースを置換するのも良い手。
改善(2) ハイフンの強制改行を対策する
上記のみでも概ね対応できるのだが、住所表示のときの「ハイフン」が意外と厄介...。
HTMLの英数字は、「半角スペース」か「ハイフン」があると自動改行される。
つまり、以下のように「ハイフン」が改行しても良いポイントになる...
<div style="word-break: keep-all; overflow-wrap: anywhere;">
東京都<wbr>千代田区丸の内<wbr>1-9-1<wbr>ABCタワー32F
</div>
おーーん
色々実験したところ、対処法はいくつかある。
(2-1) 改行してほしくない文字でグループを作る
ある程度出現する要素が分かっているのであれば、white-space: nowrap; を使ってグループ化するのが簡単かもしれない。
<div>
<span style="white-space: nowrap;">東京都</span>
<span style="white-space: nowrap;">千代田区丸の内</span>
<span style="white-space: nowrap;">1-9-1</span>
<span style="white-space: nowrap;">ABCタワー32F</span>
</div>
その <span> が表示できないなら改行、とすることができる。
これはハイフンだけでなく、いろんなものに応用ができるやり方。
<wbr>を知らなかった時の私が良く使っていた......
しかし <span> グループが大きすぎると改行されないので、先に書いたように、
- ある程度出現する要素が分かっている
- 一つのグループが小さ目
が利用の条件となる...。
<div>
<span style="white-space: nowrap;">東京都</span>
<span style="white-space: nowrap;">千代田区丸の内あいうえお</span>
<span style="white-space: nowrap;">1-9-1</span>
<span style="white-space: nowrap;">ABCタワー32F</span>
</div>
も～CJKも英数字と同じ挙動してくれよ～
(2-2) Non-breaking hyphen を用いる
調べていて初めて知ったのだが、ハイフンには二種類ある。
通常の「- (U+002D)」と、改行しない「‑ (U+2011)」。
non-breaking で想像できるように、HTMLにある の仲間みたい。
文中のハイフンを nb-hyphen に置き換えれば、改行されないので解決はする。
<div style="word-break: keep-all; overflow-wrap: anywhere;">
東京都<wbr>千代田区丸の内<wbr>1‑9‑1<wbr>ABCタワー32F
</div>
しかし...この NB-ハイフン は文字自体が ハイフンと別のものになるため、コピペや検索時に支障がでる...。
見た目だけならOK。
検索に引っかからない...
昔のエディタにコピペすると、文字化けする...
(2-3) <ruby> を用いる
正直手詰まりで、手元で色々実験したところ、理想の挙動をするものがあった。
改行したくないハイフンを <ruby> タグでくくる。それだけ。
<div style="word-break: keep-all; overflow-wrap: anywhere;">
東京都<wbr>千代田区丸の内<wbr>1<ruby>-</ruby>9<ruby>-</ruby>1<wbr>ABCタワー32F
</div>
かんたん！
読みにくいが、どうせJSで置換処理なので問題なし。
<ruby> でも <span style="display: ruby;"> でも機能する。
HTML的には良くないと思うが、ハイフンの改行を無視するオプションが無いのが悪いね！
<rp> <rt> は用いていないので問題無いか...？
おわりに
とりあえず <ruby> で良い気がしている、がどうなんでしょね。
読み上げなどに影響があると嫌だが。