CSSで改行させない方法！white-space: nowrapで可能！

この記事は上記の課題に向けて作成しています。

通常webサイトでは横幅がいっぱいになると自動で改行されます。

しかしcssを使うと自動改行を無くすことが出来ます。

この記事ではcssで改行させないようにする方法を紹介します。

この記事を読むメリット

• CSSで改行させないようにする方法がわかる

改行させたくないシーン

web制作をしていると改行させたくないシーンに出逢います。

改行させたくないシーン

• 自動改行されてしまう時
• 単語の途中で改行されてしまう時

自動改行されてしまう時

冒頭で説明した通りwebサイトは横幅を超えると自動で改行されます。

改行させたくない文章がある時は自動改行が厄介です。

こういう時にcssで制御することが出来ます。

単語の途中で改行されてしまう時

単語の途中で改行されてしまうこともあります。

例えば下記のような場合です。

単語の途中で改行されてしまう

僕はwebデザ
イナーです。

webデザイナーという単語の途中で改行させると見た目が良くないですよね。

cssを使用すると指定した単語の途中で改行されなくなります。

単語の終わりに改行される

cssを使用すると単語の終わりに改行されるようになります。

僕はwebデザイナー
です。

上記のように綺麗に改行させることが出来ます。

「white-space: nowrap」で自動改行を無くす

ではcssで自動改行を無くす方法を紹介します。

記載している通り「white-space: nowrap」のcssコードを使用します。

コードの記入方法

コードの記入方法はこちらです。

 .class {
 white-space: nowrap
}

コードは非常に簡単ですね。

実際にどのようになるのか紹介します。

自動改行している場合

まずは通常の場合を表示します。

通常、文章量が横幅を超えてしまうと自動で改行されます。しかし今回は改行させたくないです。

通常だと横幅いっぱいのところで改行されてしまいます。

今回は改行させたくないのでcssコードを追加します。

自動改行を無くした場合

cssコードを追加して改行させないようにしました。

改行されたくない改行されたくない改行されたくない改行されたくない改行…されない。

改行されずに横幅をはみ出すようになりました。

「white-space: nowrap」を設定すると改行されなくなります。

使用したHTMLコード

 <div class="test">
  <p>改行されたくない改行されたくない改行されたくない改行されたくない改行...されない。</p>
 </div>

使用したCSSコード

 .test {
  white-space: nowrap
}

「display:inline-block」で部分的に改行を無くす

単語の途中で改行されてしまう場合は「display:inline-block」を使用します。

コードの記入方法

 .class {
  display:inline-block
}

こちらもコードの記述は簡単ですね。

単語の途中で改行される

こちらの文章だと単語の途中で改行されます。

webデザイナーには「デザイン」と「コーディング」の勉強が必要です。「デザイン」はデザインソフト、「コーディング」はプログラミング言語を学習します。

一行目の末尾の「デザイン」が単語の途中で改行されています。

単語にcssを設定する

webデザイナーには「デザイン」と「コーディング」の勉強が必要です。「デザイン」はデザインソフト、「コーディング」はプログラミング言語を学習します。

先ほどの「デザイン」に「display:inline-block」を設定しました。

すると単語の途中で改行されず、単語の前で改行されるようになりました。

こちらの方が綺麗で読みやすいですよね。

使用したHTMLコード

 <div class="test">
  <p>webデザイナーには「デザイン」と「コーディング」の勉強が必要です。<span class="sample">「デザイン」</span>はデザインソフト、「コーディング」はプログラミング言語を学習します。</p>
 </div>

使用したCSSコード

 .sample {
  display:inline-block
}

コーディング学習で悩んでいる方向けに記事を作成しました↓

あわせて読みたい

【初心者向け】コーディングの勉強方法を紹介！ 効率的なコーディングの勉強方法を知りたい この記事は上記の課題に向けて作成しています。 webデザイナーを目指す方にとってコーディング学習は必須です。 これからコ...

CSSで改行させないようにするのは簡単！

最後にまとめです。

• 「white-space: nowrap」で自動改行を無くす
• 単語の途中で改行させない場合は「display:inline-block」を使用する

改行はcssでコントロールすることが出来ます。

知らなかった方は是非実装してみてください。

※独学でwebデザイナーを目指している方の中で、何から勉強すれば良いか悩んでいる方はいませんか？webデザイナーに転職した僕が何から行えば良いか紹介します。

あわせて読みたい

webデザインの独学は何から始めれば良いか紹介！ webデザインの独学は何から行えば良いの？ この記事は上記の課題に向けて作成しています。 webデザインを独学で行う方は何から行動すれば良いか悩みますよね。 そんな方...

※未経験でwebデザイナーになれるか不安に思ったりしてませんか？僕自身未経験でwebデザイナーに転職しました。僕が実際に行ったことを記事にまとめました。

あわせて読みたい

未経験からwebデザイナーになるためにやったことを紹介！ 未経験でwebデザイナーになるには何をすれば良いの？ この記事は上記の課題に向けて作成しています。 未経験でwebデザイナーを目指している方が多いかと思います。 僕自...