フリーランスが会社員収入を継続して得られないパターン7つ

単語が改行で切れてしまう場合のCSSの直し方

単語が改行で切れてしまう問題

例えば「英会話ならセブ」と表示するときに「セブ」で改行されてしまうと見栄えが悪いです。

この場合の修正方法をお伝えします。

 

単語が改行で切れてしまう場合の解決策

1.改行させたくない単語をspanで囲み、display:inline-block;を指定する

幅が狭すぎてどうしても改行せざるを得ないときは、改行してしまいます。ただこれによ、予期せぬ横スクロールが発生するのを防げます。

HTML

CSS

 

2.改行させたくない単語をspanで囲み、white-space:nowrap;を指定する

幅が狭すぎてどうしても改行せざるを得ないときも改行されません。ただし横スクロールが発生してしまうという弊害があります。

CSS