【css】white-space: nowrapがずっと改行しない

white-space: nowrap;が改行してほしいところでも改行しない現象に遭遇。

このhtmlコードで
———————————————–
<table>
<tr>
<td>
<span style=”white-space: nowrap;”>改行させない1</span>
<span style=”white-space: nowrap;”>改行させない2</span>
<span style=”white-space: nowrap;”>改行させない3</span>
</td>
</tr>
</table>
———————————————–

テーブルの幅があるときこうなっているものを
———————————————–
改行させない1改行させない2改行させない3
———————————————–

テーブルの幅がないスマホなどで見たときこう表示させたい
———————————————–
改行させない1
改行させない2
改行させない3
———————————————–

しかしこうなる。改行しない。画面の外に文字の一部が出てしまう。
———————————————–
改行させない1改行させない2改行させない3
———————————————–

原因は htmlコード自体の改行を行っていなかったため。
実際の htmlコードはこうだった。
———————————————–
<table>
<tr>
<td>
<span style=”white-space: nowrap;”>改行させない1</span><span style=”white-space: nowrap;”>改行させない2</span><span style=”white-space: nowrap;”>改行させない3</span>
</td>
</tr>
</table>
———————————————–

<span>~</span>の境目が改行されていなかったため。
次のようにしたら希望通りに改行できた。
———————————————–
<table>
<tr>
<td>
<span style=”white-space: nowrap;”>改行させない1</span>(ここ改行)
<span style=”white-space: nowrap;”>改行させない2</span>(ここ改行)
<span style=”white-space: nowrap;”>改行させない3</span>(ここ改行)
</td>
</tr>
</table>
———————————————–

white-space: nowrap;をうまく扱うときは、空白文字を必要な場所にきちんと入れること。

タイトルとURLをコピーしました