【HTML CSS】CSSとたたかう　自動改行、住所のハイフン編


HTMLの改行の仕様はとても複雑......。
なので調査録を残しました。

余計な装飾をしないように `<div>` を使っていきます。


## デフォルト

```html
<div>
    東京都千代田区丸の内1-9-1ABCタワー32F
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/67e4c115-c733-6193-3e1d-fde68e93c7a4.png)

ただ文字を表示しただけだと、とても読みにくい...。



## 改善(1) 改行ポイントを手動で指定する

https://qiita.com/tamanyan/items/e37e76b7743c59235995

こちらの記事で言及されていた手法。

> `word-break: keep-all;` + `overflow-wrap: anywhere;` + `<wbr>`

- `word-break: keep-all;` で、日本語(CJK)のどこでも改行を禁止にする。
- `overflow-wrap: anywhere;` で、範囲を超えていたら任意の場所で改行する。
- `<wbr>` は改行してほしいポイントを教えてあげるもの。

これを組み合わせることで、

- その行内で表示できそうなら表示する
- 無理そうなら次の行へ表示する
- 1行に収まらなかったら、ボックス端で強制改行する

が実現できます！

```html
<div　style="word-break: keep-all; overflow-wrap: anywhere;">
    東京都<wbr>千代田区<wbr>丸の内<wbr>1-9-1<wbr>ABCタワー32F
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/76890acb-4eb6-41d8-00d9-b086c674ed73.png)

お～～とても読みやすい。  
住所は項目ごとに登録なりしがちなので、間に `<wbr>` を入れてあげればOK。  
半角スペースを置換するのも良い手。  





## 改善(2) ハイフンの強制改行を対策する

上記のみでも概ね対応できるのだが、住所表示のときの「ハイフン」が意外と厄介...。
HTMLの英数字は、「半角スペース」か「ハイフン」があると自動改行される。

つまり、以下のように「ハイフン」が改行しても良いポイントになる...:confounded:

```html
<div style="word-break: keep-all; overflow-wrap: anywhere;">
    東京都<wbr>千代田区丸の内<wbr>1-9-1<wbr>ABCタワー32F
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/cae0de0f-f55d-feb3-e2a6-4731a7ced1e6.png)

おーーん  

色々実験したところ、対処法はいくつかある。  


### (2-1) 改行してほしくない文字でグループを作る

ある程度出現する要素が分かっているのであれば、`white-space: nowrap;` を使ってグループ化するのが簡単かもしれない。

```html
<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>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/0d280740-edb7-cd14-fa75-316db73d0737.png)

その `<span>` が表示できないなら改行、とすることができる。 
これはハイフンだけでなく、いろんなものに応用ができるやり方。

> `<wbr>` を知らなかった時の私が良く使っていた......

しかし `<span>` グループが大きすぎると改行されないので、先に書いたように、

- ある程度出現する要素が分かっている
- 一つのグループが小さ目

が利用の条件となる...。

```html
<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>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/d5014f97-c24e-f18c-a03c-5b500837c9ae.png)

も～CJKも英数字と同じ挙動してくれよ～  




### (2-2) Non-breaking hyphen を用いる

調べていて初めて知ったのだが、ハイフンには二種類ある。  
通常の「- (U+002D)」と、改行しない「‑ (U+2011)」。

non-breaking で想像できるように、HTMLにある `&nbsp;` の仲間みたい。
文中のハイフンを nb-hyphen に置き換えれば、改行されないので解決はする。  

```html
<div style="word-break: keep-all; overflow-wrap: anywhere;">
    東京都<wbr>千代田区丸の内<wbr>1‑9‑1<wbr>ABCタワー32F
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/dbab816a-f2f5-8770-54ff-304531c0dad4.png)

しかし...この NB-ハイフン は文字自体が ハイフンと別のものになるため、コピペや検索時に支障がでる...。
見た目だけならOK。

> 検索に引っかからない...
>
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/6fca63e2-87be-5c23-5345-fd7dac3c0a20.png)
>
> 昔のエディタにコピペすると、文字化けする...
>
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/b5657195-af7b-2249-3e4c-1c972e4c69ae.png)


### (2-3) `<ruby>` を用いる

正直手詰まりで、手元で色々実験したところ、理想の挙動をするものがあった。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby

改行したくないハイフンを `<ruby>` タグでくくる。それだけ。

```html
<div style="word-break: keep-all; overflow-wrap: anywhere;">
    東京都<wbr>千代田区丸の内<wbr>1<ruby>-</ruby>9<ruby>-</ruby>1<wbr>ABCタワー32F
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/269b91a6-4e98-4c56-c988-18a261255f65.png)

かんたん！
読みにくいが、どうせJSで置換処理なので問題なし。

`<ruby>` でも `<span style="display: ruby;">` でも機能する。
HTML的には良くないと思うが、ハイフンの改行を無視するオプションが無いのが悪いね！

`<rp>` `<rt>` は用いていないので問題無いか...？  



## おわりに

とりあえず `<ruby>` で良い気がしている、がどうなんでしょね。
読み上げなどに影響があると嫌だが。