収入・働き方別プログラミング言語の選び方

CSSで単語の改行しない方法はdisplay:inline-block;かwhite-space:nowrap;

web制作をしていると、改行させたくない部分で単語が改行してしまうことがあります。

なのでCSSで単語の改行しない方法をお伝えします。

 

CSSで単語の改行しない方法はdisplay:inline-block;かwhite-space:nowrap;です

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

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

HTML

CSS

 

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

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

CSS