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

単語の途中で改行されてしまうのを防ぐ方法【HTML/CSS】

単語内で改行されてしまうHTML,CSSの問題の解決策です。

問題

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

例えば以下のようにコードを書いたときに、divの大きさを狭めると、単語の途中で改行されてしまいます。

 

解決策

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

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

HTML

CSS

 

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

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

CSS