CSSで文章を改行させない方法:brと組み合わせれば意図した行数に

HTML/CSS

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

文章を改行させない指定

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

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

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し

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

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

注意点

「white-space」の指定をすると画面幅による自動調整も無くなります。
するとスマホ表示時などではコンテンツごと横にスクロールして意味の無い空白が出来てしまう恐れがあるので注意しましょう。
これを解決するにはメディアクエリ毎の指定が必要になります。(次で紹介)

ワードプレスの場合

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

改行の応用編

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

brと組み合わせる

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

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

改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し改行無し

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

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

改行無しとbr改行無しとbr改行無しとbr改行無しとbr
改行無しとbr改行無しとbr改行無しとbr

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

メディアクエリ毎に記述

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

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

ipadとスマホは通常,PCの時は改行無し,ipadとスマホは通常,PCの時は改行無し

HTML

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

CSS

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


以上が「CSSで文章を改行させない方法:brと組み合わせれば意図した行数にか」でした。

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

2020年4月11日HTML/CSSCSS,WEB

Posted by KT