CSSで改行させない方法！white-spaceとinline-blockで実現　byウェブカツ 

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

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

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

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

を紹介する。

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

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

### 単語の途中で改行させたくない場合
英単語と違い、日本語は単語の区切りが曖昧だ。そのため、<span class="keiko_yellow">**単語の途中であっても勝手に改行**</span>されてしまう。

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

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

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

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

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

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

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

指定したい要素に

> white-space: nowrap;

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

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

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

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

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

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap2.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap2.png)

nowrapを設定していないと、<span class="keiko_yellow">**要素の幅に収まるよう勝手に改行**</span>されてしまう。

### white-space:nowrapを設定した例


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

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

![](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap1.png)

nowrapを設定すると、<span class="keiko_yellow">**要素の幅を超えても改行されない。**</span>

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

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

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

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap3.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap3.png)

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

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

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

```css:css
td{
white-space: nowrap;
}
```

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap4.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap4.png)

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

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

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

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

```css:css
span {
display: inline-block;
}
```

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

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

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


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

```css:css
span {
display: inline-block;
}
```

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap5.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap5.png) [![](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap6.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap6.png) [![](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap7.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/07/css_nowrap7.png)

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

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

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

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

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

を紹介した。

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

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

【ウェブカツ公式WEBサイト】
[https://webukatu.com/](https://webukatu.com/?utm_source=blog&utm_medium=bl02&utm_campaign=blog_pr)