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

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

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

white-space: nowrapを利用する 

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

例を見てみましょう。スクリーンショット 2016-03-03 6.58.23

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

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

white-space: nowrap;

を追加してみます。

スクリーンショット 2016-03-03 7.06.26これだけで、改行がされなくなりました。

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

スクリーンショット 2016-03-03 7.29.05

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

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

スクリーンショット 2016-03-03 7.32.34このように自動の改行が禁止され、不恰好になってしまっていたセルが元に戻りました。

.クラス名  { white-space: nowrap;}

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


購読

平日・毎朝更新中