takato（@n8takato）です！
CSSで改行させないようにしたい
この記事は上記の課題に向けて作成しています。
通常webサイトでは横幅がいっぱいになると自動で改行されます。
しかしcssを使うと自動改行を無くすことが出来ます。
この記事ではcssで改行させないようにする方法を紹介します。
この記事を読むメリット
- CSSで改行させないようにする方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
CSSで改行させない方法
早速cssで改行をさせない方法を紹介します。
下記コードを使用することで改行させないように出来ます。
使用するコード
white-space: nowrapこの1行をcssで設定することで改行をさせないように実装出来ます。
改行させない設定が無い場合
下記文章は改行させない設定がされていないものとなります。
通常、文章量が横幅を超えてしまうと自動で改行されます。しかし今回は改行させたくないです。
上記のように文章は自然と改行されます。
CSSで改行させない設定をしている場合
次に先ほどのcssコードを実装した場合のものとなります。
改行されたくない改行されたくない改行されたくない改行されたくない改行…されない。
先ほどのものとは違い、改行されず枠からはみ出しています。
このように先ほどのcssを追加することで改行させない実装ができるのです。
CSSで単語を途中で改行させない方法
続いてはcssで単語を途中で改行させない方法を紹介します。
web制作をしていると単語の途中で改行されてしまうことがよくあります。
単語の途中で改行されてしまう例
webデザイナーには「デザイン」と「コーディング」の勉強が必要です。「デザイン」はデザインソフト、「コーディング」はプログラミング言語を学習します。
上記の例だと、一行目最後の「デザイン」という単語が途中で改行されているのがわかると思います。
単語の途中で改行されてしまうのはデザインの観点からあまり好ましくないです。出来れば単語の前か後に改行されるようにする必要があります。
単語の途中で改行されるのを防ぐために下記のcssコードを追加します。
使用するcssコード
display:inline-blockこのcssコードを実装すると下記のように改行されます。
webデザイナーには「デザイン」と「コーディング」の勉強が必要です。「デザイン」はデザインソフト、「コーディング」はプログラミング言語を学習します。
このように単語の途中で改行されるのを自動で防いでくれます。
CSSで改行をさせないのは簡単
最後にまとめです。
- 改行させないようにするには「white-space: nowrap」で実装する
- 単語の途中で改行させないためには「display:inline-block」で実装する
どちらも1行のcssで実装出来ますので、とても簡単です。
もし知らなかった方は是非試してみてください。
CSSに関する記事
