WEBサイトを作っていると、

「ここで改行してほしくないのに勝手に改行された！」
という場面に遭遇したこともあるのではないだろうか。

そこで今回は、CSSで改行させない方法について

改行したくない場面
white-spaceを使う方法
inline-blockを使う方法

を紹介する。

改行させない方法がわからなくて悩んでいる人は、参考にしてほしい。

改行させたくない時とは？

そもそも改行させたくない場合とはどんな時か？よくあるパターンを紹介する。

単語の途中で改行させたくない場合

英単語と違い、日本語は単語の区切りが曖昧だ。そのため、単語の途中であっても勝手に改行されてしまう。

例えば以下のような文章の場合、

私は毎日プログラミン
グを学習しています。

このように単語の途中で改行されると不恰好だ。

ブロックレベル要素を改行させたくない場合

pタグやdivタグなどのブロックレベル要素は、タグ内が一つの段落であることを意味しているため、タグの終わりに自動で改行が入る。

だが、JavaScriptから操作している場合など、どうしても改行したくない場合もある。

white-spaceを使う

ではまず改行させない方法として、white-spaceを紹介する。

white-spaceは、空白類文字（改行、半角スペース、タブ）をどう扱うかを指定するプロパティである。

指定したい要素に

white-space: nowrap;

と設定するだけで改行を強制的に禁止することができる。ちなみに、「nowrap＝折り返さない」という意味。

それでは違いがわかるように、実際にnowrapを設定した例としていない例を比べてみる。

white-space:nowrapを設定していない例

html

<p>
改行されません。改行されません。改行されません。
</p>

css

p {
width:50px;
background:orange;
}

nowrapを設定していないと、要素の幅に収まるよう勝手に改行されてしまう。

white-space:nowrapを設定した例

html

<p>
改行されません。改行されません。改行されません。
</p>

css

p {
width:50px;
background:orange;
white-space: nowrap;
}

nowrapを設定すると、要素の幅を超えても改行されない。

テーブル内のtd要素にwhite-space:nowrapを設定する

pやdiv要素の他、テーブル内のtd要素に指定すると、セル内の自動的な折り返しを禁止することができる。

html

<table>
<tr><td>アイスクリーム</td><td>ソフトクリーム</td></tr>
<tr><td>300円</td><td>100円</td></tr>
</table>

この場合、単語の途中でも勝手に改行されてしまう。

そこでtdに「white-space: nowrap」を指定すると、

html

<table>
<tr><td>アイスクリーム</td><td>ソフトクリーム</td></tr>
<tr><td>300円</td><td>100円</td></tr>
</table>

css

td{
white-space: nowrap;
}

このように単語の途中で勝手に改行されることがなくなる。

inline-blockを使う

white-spaceだと「改行禁止区間を長く取りすぎてしまい、どうしても改行が必要な場合にであっても改行されずに横スクロールが表示されてしまう」といったことが起こり得る。

そうならないために、inline-blockを使うという方法がある。改行自体は禁止せず、spanなどで囲んだ単語に**「display:inline-block」**を指定する。

span要素に指定したい場合は以下のようにCSSファイルに記述。

css

span {
display: inline-block;
}

inline-blockを指定すると、指定範囲はブロックレベル要素のように表示されるものの、インライン要素のように配置される。

そのため、inline-blockを指定した範囲はひとかたまりとして表示されるが、どうしても必要な場合に限り****内部で自動改行もされる。

では実際にどのように表示されるのか。

html

<span>プログラミング</span>の学習を継続して、大変なこともあるけれど頑張って
<span>エンジニア</span>を目指しましょう。

css

span {
display: inline-block;
}

これでno-wrapを指定したspan要素に含まれる**「プログラミング」や「エンジニア」**という単語は改行されなくなった。

ただし、ブラウザの幅が足りない時など必要な場合にはきちんと改行される。

divやpなどブロックレベル要素を改行したくない場合も同様。inline-blockを指定することでインライン要素のように配置される。

まとめ

以上、CSSで改行させない方法について

改行したくない場面2つ
white-spaceを使って強制的に改行させない方法
inline-blockを使って必要に応じた改行をする方法

を紹介した。

white-spaceもinline-blockも簡単に実装できるので、必要に応じた方法で試してほしい。

かずきち

プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/