無料オンライン勉強サービス10選おすすめ

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

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

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

 

CSSで単語の改行しない方法は2つ

CSSで単語の改行をしない方法は2つあります。

  1. display:inline-block;
  2. white-space:nowrap;

 

1.display:inline-block;

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

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

HTML

CSS

 

2.white-space:nowrap;

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

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

CSS