【css】white-space: nowrapがずっと改行しない(タグの境目に改行がなかった)

この記事について

つまずきポイント要約

• spanの境目に空白文字(改行)がないと折り返せる位置がなくなり、画面の外に文字がはみ出す

事象

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