CSSを使ってテキストを改行させない方法

今回はHTML/CSSでコーティングしWEBサイトを作成してる段階で、テキスト量や画面幅によって意図しない改行が出てきてしまう場合に使えるstyleの指定方法を紹介します。

文章を改行させない指定

文章の改行をさせないCSSの記述は「white-space: nowrap;」です。
プロパティの「white-space」はソース中のホワイトスペースの表示方法と改行の表示方法です。
「nowrap」はホワイトスペース、改行ともに無視する指定なので記述した行数のまま表示されます。

例

下記は「white-space」の記述の無い通常のテキストです。

下記は「white-space」の記述をした改行無しのテキストです。

<p style="white-space: nowrap;">改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し</p>

このように文章の改行をなくす事が出来ます。

ワードプレスの場合

ワードプレスの場合は、ブロック選択→フォーマット→整形済みテキストで可能です。
ただしこの場合は、横に長くなった分はスクロールブロックになっていきます。

改行の応用編

先述で紹介した「white-space: nowrap;」に+アルファで調整をしてあげることで意図した改行数を作り出す事が出来ます。
その応用的な部分をいくつか紹介します。

brと組み合わせる

改行無しの指定で自動的に改行されてしまっているのを一旦無しにして「br」の記述で意図した改行数にしていきます。

下記は「white-space: nowrap;」の指定で「br」無しのテキストです。

<p style="white-space: nowrap;">改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し
</p>

下記が「white-space: nowrap;」と「br」を組み合わせて意図した改行にしたテキストです。

<p style="white-space: nowrap;">改行無しとbr改行無しとbr改行無しとbr改行無しとbr改行無しとbr改行無しとbr改行無しとbr
</p>

メディアクエリ毎に記述

「white-space: nowrap;」を@mediaの指定で画面幅に応じて改行の有無を使い分けて、レスポンシブデザインのレイアウトを作っていきます。

下記の記述はipadとスマホは通常の改行を行い、PCの時は改行無しになります。

HTML

<span class="span001">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</span>

CSS

<style>
@media (min-width:768px) {
.span001 {
white-space: nowrap;
}}
</style>

以上が「CSSを使ってテキストを改行させない方法」でした。

HTML/CSSに慣れてる人でも意外と難しかったりするので、少しでも参考になったら幸いです。