WEBサイトを作っていると、
「ここで改行してほしくないのに勝手に改行された！」
という場面に遭遇したこともあるのではないだろうか。
そこで今回は、CSSで改行させない方法について
- 改行したくない場面
- white-spaceを使う方法
- inline-blockを使う方法
を紹介する。
改行させない方法がわからなくて悩んでいる人は、参考にしてほしい。
改行させたくない時とは？
そもそも改行させたくない場合とはどんな時か？よくあるパターンを紹介する。
単語の途中で改行させたくない場合
英単語と違い、日本語は単語の区切りが曖昧だ。そのため、単語の途中であっても勝手に改行されてしまう。
例えば以下のような文章の場合、
私は毎日プログラミン
グを学習しています。
このように単語の途中で改行されると不恰好だ。
ブロックレベル要素を改行させたくない場合
pタグやdivタグなどのブロックレベル要素は、タグ内が一つの段落であることを意味しているため、タグの終わりに自動で改行が入る。
だが、JavaScriptから操作している場合など、どうしても改行したくない場合もある。
white-spaceを使う
ではまず改行させない方法として、white-spaceを紹介する。
white-spaceは、空白類文字（改行、半角スペース、タブ）をどう扱うかを指定するプロパティである。
指定したい要素に
white-space: nowrap;
と設定するだけで改行を強制的に禁止することができる。ちなみに、「nowrap＝折り返さない」という意味。
それでは違いがわかるように、実際にnowrapを設定した例としていない例を比べてみる。
white-space:nowrapを設定していない例
<p>
改行されません。改行されません。改行されません。
</p>
p {
width:50px;
background:orange;
}
nowrapを設定していないと、要素の幅に収まるよう勝手に改行されてしまう。
white-space:nowrapを設定した例
<p>
改行されません。改行されません。改行されません。
</p>
p {
width:50px;
background:orange;
white-space: nowrap;
}
nowrapを設定すると、要素の幅を超えても改行されない。
テーブル内のtd要素にwhite-space:nowrapを設定する
pやdiv要素の他、テーブル内のtd要素に指定すると、セル内の自動的な折り返しを禁止することができる。
<table>
<tr><td>アイスクリーム</td><td>ソフトクリーム</td></tr>
<tr><td>300円</td><td>100円</td></tr>
</table>
この場合、単語の途中でも勝手に改行されてしまう。
そこでtdに「white-space: nowrap」を指定すると、
<table>
<tr><td>アイスクリーム</td><td>ソフトクリーム</td></tr>
<tr><td>300円</td><td>100円</td></tr>
</table>
td{
white-space: nowrap;
}
このように単語の途中で勝手に改行されることがなくなる。
inline-blockを使う
white-spaceだと「改行禁止区間を長く取りすぎてしまい、どうしても改行が必要な場合にであっても改行されずに横スクロールが表示されてしまう」といったことが起こり得る。
そうならないために、inline-blockを使うという方法がある。改行自体は禁止せず、spanなどで囲んだ単語に**「display:inline-block」**を指定する。
span要素に指定したい場合は以下のようにCSSファイルに記述。
span {
display: inline-block;
}
inline-blockを指定すると、指定範囲はブロックレベル要素のように表示されるものの、インライン要素のように配置される。
そのため、inline-blockを指定した範囲はひとかたまりとして表示されるが、どうしても必要な場合に限り****内部で自動改行もされる。
では実際にどのように表示されるのか。
<span>プログラミング</span>の学習を継続して、大変なこともあるけれど頑張って
<span>エンジニア</span>を目指しましょう。
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/