CSSでnowrapを使うには？改行せずにはみ出た部分の処理の仕方も紹介

「文字列が改行するのを防ぎたい」「CSSでのnowrapが効かない」

そんな悩みはありませんか？

HTMLでは、何も指定していない場合、要素の端で文字列が自動改行されてしまいます。

CSSを使って簡単に禁止する方法があれば、便利ですよね。

今回は、ページ内の文字列を改行させない処理をしたい、という方のために

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのnowrapを利用して、文字列を改行させない方法がわかるようになりますよ。

ぜひ最後まで読んでくださいね！

文字列の改行するには？CSSのnowrapの使い方

HTMLコード内に記述した文章は、何も指定していない場合、要素の端、もしくは画面の端で自動改行されます。

この改行の有無を操作したい場合には、CSSのwhite-spaceプロパティを使用します。

white-spaceプロパティの値を「nowrap」にすることで、自動改行をなくすことができます。

p{
white-space:nowrap;
}

上記では、p要素内の文章が改行されなくなります。

CSSのwhite-spaceプロパティは、主に次の2つの表示方法を指定します。

改行については、入力した改行が反映されるかどうか、要素端で自動改行されるかどうかを指定します。

改行がどのように指定されたとしても、<br>を記入すれば好きな個所で改行は可能です。

<style>
p{
white-space:nowrap;
}
</style>
<p>この要素は自動改行を禁止していますが、好きな個所で改行を入れることはできます。<br>要素端での改行はされません。</p>

上記では、<br>でのみ改行されます。

nowrapと初期値normalとの違い

white-spaceプロパティの初期値は「normal」となっています。

normalとnowrapにはどのような違いがあるのでしょうか？

normalでは、連続する改行や半角スペース、タブなどは、まとめられて1つの半角スペースとして表示されます。

文末の改行や半角スペースは無視されます。また、要素の端で自動改行されます。

nowrapでは、最後の要素端での自動改行がなくなるのみで、他の部分は同じ処理を行います。

要素からはみ出た文章の表示について

「white-space:nowrap」を指定すると、自動改行されないため、要素より長い文章ははみ出てしまいます。

要素からはみ出た部分の表示方法は、overflowプロパティで指定できます。

例えば、「overflow:scroll」ではスクロール表示され、「overflow:hidden」では、はみ出た部分が非表示になります。

<style>
p{
white-space:nowrap;
overflow:scroll;
width:200px;
}
</style>
<p>この要素は自動改行を禁止しており、はみ出た部分はスクロール表示されます。</p>

nowrap属性について

以前は、セル内のテキスト改行を防ぐ方法として、タグにnowrap属性を指定する方法がありました。

<th nowrap="nowrap">グループ</th>
<td>A</td>
<td>B</td>

ただし、この方法はHTML5では非推奨となっています。

改行をなくす場合には、これまで説明してきたCSSを使う方が良いでしょう。

まとめ：自動改行をなくすにはwhite-spaceを使う

今回は、要素端での自動改行をなくすために、CSSの「white-space:nowrap」を使用する方法を解説してきました。

はみ出た部分の表示方法についても説明しましたね。

「改行するとレイアウトが崩れてしまう」「異なる端末でも同じように表示したい」、といったときに使用してみてください。

Webページを作成する際に、今回の記事が参考になれば幸いです。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！