white-space: nowrap;が改行してほしいところでも改行しない現象に遭遇。
このhtmlコードで
———————————————–
<table>
<tr>
<td>
<span style=”white-space: nowrap;”>改行させない１</span>
<span style=”white-space: nowrap;”>改行させない２</span>
<span style=”white-space: nowrap;”>改行させない３</span>
</td>
</tr>
</table>
———————————————–
テーブルの幅があるときこうなっているものを
———————————————–
改行させない１改行させない２改行させない３
———————————————–
テーブルの幅がないスマホなどで見たときこう表示させたい
———————————————–
改行させない１
改行させない２
改行させない３
———————————————–
しかしこうなる。改行しない。画面の外に文字の一部が出てしまう。
———————————————–
改行させない１改行させない２改行させない３
———————————————–
原因は htmlコード自体の改行を行っていなかったため。
実際の htmlコードはこうだった。
———————————————–
<table>
<tr>
<td>
<span style=”white-space: nowrap;”>改行させない１</span><span style=”white-space: nowrap;”>改行させない２</span><span style=”white-space: nowrap;”>改行させない３</span>
</td>
</tr>
</table>
———————————————–
<span>～</span>の境目が改行されていなかったため。
次のようにしたら希望通りに改行できた。
———————————————–
<table>
<tr>
<td>
<span style=”white-space: nowrap;”>改行させない１</span>（ここ改行）
<span style=”white-space: nowrap;”>改行させない２</span>（ここ改行）
<span style=”white-space: nowrap;”>改行させない３</span>（ここ改行）
</td>
</tr>
</table>
———————————————–
white-space: nowrap;をうまく扱うときは、空白文字を必要な場所にきちんと入れること。
