【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;をうまく扱うときは、空白文字を必要な場所にきちんと入れること。