CSSで文字列の折り返しをさせない方法

セルの中が思ったより長文になってしまった場合や、表示する範囲が狭まってしまった時に、文字列が勝手に折り返してしまい、レイアウトが崩れることがあると思います。

そんな時は、今回ご紹介する方法を利用することで、簡単に文字列の折り返しを禁止することができます。

white-space: nowrapを利用する　

white-space: nowrapは、改行を強制的に禁止するとができるプロパティです。

例を見てみましょう。

これは、何も指定していない時の表示テストです。２行目が幅が足りなくて改行してしまっているのがわかるかと思います。

ここで、改行したくない要素に

を追加してみます。

これだけで、改行がされなくなりました。

このプロパティは、表示幅が足りない時だけでなく、セルの幅が足りない時にも利用することができます。

これが自動での改行を禁止していないセルです。先ほどのwhite-space: nowrapを利用して、改行を禁止してみましょう。

テストのセルに、white-space: nowrapを追加してみます。

このように自動の改行が禁止され、不恰好になってしまっていたセルが元に戻りました。

このような、改行を禁止するクラスを作っておくと、このクラスをつけるだけで好きな時に改行禁止を適用することができます。