【CSS】文章の折り返しを無効化する方法

今回は、要素内の文章の折り返しを無視して続ける方法を書き留めておく。

あまり使わない設定ではあるが、いちおう紹介しておく。

WordPressの文章が折り返される理由

通常、WordPressでは、特に何も設定されていない場合、要素の中の文章は折り返されるようになっているはずである。テーマに関わらずだ。

上のデモで、たくさんの「hoge」の並びが途中で折り返されているのがわかるだろうか？

普通ならば、文章が折り返されてもさして困ることはない。なぜなら、「折り返さない」設定をしていると、メインコンテンツの本文から文章があふれ出して、デザインが崩れてしまう。それに、スマートフォンの小さな画面で見た場合はもっと崩れてしまうだろう。

だが、場合によっては折り返されると困る文章もあったりする。

今回は、そのような場合に対応するためのCSSのプロパティを紹介する。

それでは説明していきたい。

今回のカスタマイズは特に複雑なことをする必要は無く、「style.css」で要素を指定してCSSプロパティを付け加えるだけでよい。

以下のように、簡単な方法で文章の折り返しを無視することが可能だ。

文章の折り返しを無効化するCSS

.hoge {
	white-space: nowrap;
}

「white-space: nowrap;」というプロパティを入力すると、折り返しを無効化することができる。

ただし、そのままでは要素からはみ出してしまうので、必ず「white-space: nowrap;」の下にこのふたつのプロパティを忘れずに入力しよう。

スクロールを加えた文章の折り返しを無効化するCSS

.hoge {
	white-space: nowrap;
	overflow: scroll;
	overflow-y: hidden;
}

「overflow: scroll;」さらにそのすぐ下に「overflow-y: hidden;」を加えることで、このように折り返しが無効化されつつ、スクロールで文章を最後まで読むことができる。

折り返しが無効化されているのが確認できるだろうか？

「white-space」プロパティとは、「要素内の文章をどのように扱うか」を設定するものである。

ホワイトスペースをざっくり説明すると、文字の空間を指すものであり、これをどのように設定するかで、文章の折り返されかたも違ってくる。

今回は「nowrap」、直訳すると「包まない」値を設定することで、改行したときの縦の空間も詰めつつ、文章の折り返しを無視して表示することが出来た。

これが、まずひとつめの文章を折り返さない方法だ。

じつはもうひとつ、文章の折り返しを無視する値がある。

それがこれだ。

文章の折り返しを無効化するもうひとつのCSS

.hoge {
	white-space: pre;
}

「white-space: pre;」というプロパティの値でも折り返しを無視することができる。

もちろん、これもスクロールを忘れないようにしよう。

スクロールを加えた文章の折り返しを無効化するもうひとつのCSS

.hoge {
	white-space: pre;
	overflow: scroll;
	overflow-y: hidden;
}

こうすると、デモではこのように表示される。

先ほどの「nowrap」の値を使うものと比べて、文章の行間がだいぶ空いていることに気が付いただろうか？

「white-space: pre;」は、「white-space: nowrap;」とは違い、</br>要素をまとめないという特徴がある。

つまり、先ほどのデモが示しているものは、このCocoonで設定している「line-height: 1.8;」を無視していないということである。

折り返しは無視したいが、行と行の間隔はまとめられて欲しくない場合は、「pre」を使おう。

これで、もうひとつめの解説も終える。

スクロールバーの設定についてはこちらの記事を見ておいてほしい。

今回は、要素内の文章の折り返しを無視する方法を備忘録的に書き留めておいた。

また、なにか些細なことに気が付いたらこういったことを書き留めておく。