WORK NOTE BLOG

テキストが自動で折り返される場合に、折り返される文字の固まりを指定する。

特定の幅を持った領域内のテキストは、その領域の幅を超えた場合、右端で自動的に折り返される。
これはブラウザで文字サイズを大きくした場合も、領域の幅を超えると折り返される。

例えば

愛知県瑞穂市塩出町285-59 みずほ印刷株式会社

というテキストがあった場合、どこで折り返されるかは文字サイズや字数に依存することになる。
これを例えば、文字サイズが大きくなったとしても必ず「みずほ印刷株式会社」だけが、固まりとして改行されるようにしたい場合がある。

具体的には、折り返る場合は下記のように折り返るようにするということ。

愛知県瑞穂市塩出町285-59
みずほ印刷株式会社

この場合は

<span class="nowrap">みずほ印刷株式会社</span>

のようにし、CSSでは

.nowrap {white-space: nowrap;}

のようにしておく。

すると最も右端にある「社」の字が領域幅を超えそうになったとき、「社」の文字だけでなく「みずほ印刷株式会社」の文字全体で折り返るようになる。

ただし、さらに文字サイズを大きくし「愛知県瑞穂市塩出町285-59」が領域の幅を超えてしまう場合は、超えた文字だけが折り返されるので、さらにひとかたまりの文字として折り返したい場合は、その部分を<span class="nowrap"></span>で括っておく必要がある。