phi

I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python

phiaryjust a creator

CSS tips - 文字列を確実に改行させる方法

9 years ago

文字列を確実に改行させる方法をサンプル交えつつ紹介します.

word-break: break-all で改行させる

基本的には, word-wrap: break-word を指定すれば要素の幅に応じて自動改行してくれるようになります.

.line-break {
  word-wrap: break-word;
}

下記が動作デモになります. 下の box ではちゃんと改行されているのが分かるかと思います.

引っかかりポイントその１ - white-space をリセットしよう

上記の方法で基本的には良いのですが, white-space: nowrap が指定されている場合は自動改行されなくなります.

確実に自動改行させたい場合は white-space: normal も付けるようにしましょう.

.line-break {
  word-wrap: break-word;
  white-space: normal;
}

引っかかりポイントその２ - inline 要素か block 要素かを意識しよう

これは html の基礎でもあるのですが, width プロパティは inline 要素には効きません. なので span や display:inline のついた要素では, 上記のプロパティを適応してもうまく改行されません.

ちょっと褒められた方法ではないですが, display:block もつけておくことをお勧めします.

.line-break {
  word-wrap: break-word;
  white-space: normal;
  display: block;
}

これで大抵の場合は改行されるようになると思います.

何か他にも注意するポイントがあればコメントなどでアドバイスいただけると幸いです.

Reference