frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

white-space、word-wrap、word-breakをまとめてみた。

スポンサードリンク


スポンサードリンク


white-space、word-wrap、word-breakの違いがわかりづらいのでまとめてみました。

See the Pen KgyGzw by funclur (@funclur) on CodePen.


1.指定なし

  • 日本語は単語の途中でも折り返されます
  • 英語は単語区切りで折り返されます
  • 連続する英数字は折り返されません

2.white-space: nowrap;

  • 日本語、英語ともに折り返されません

3.word-wrap: break-word;

  • 日本語は単語の途中でも折り返されます
  • 英語は単語区切りで折り返されます
  • 連続する英数字も折り返されません

4.word-wrap: break-all;

  • 日本語は単語の途中でも折り返されます
  • 英語は単語区切りで折り返されます
  • 連続する英数字も折り返されます

5.word-wrap: normal;

  • 日本語は単語の途中でも折り返されます
  • 英語は単語区切りで折り返されます
  • 連続する英数字も折り返されません

6.word-break: break-all;

  • 日本語は単語の途中でも折り返されます
  • 英語は単語区切りで折り返されます
  • 連続する英数字も折り返されません

違いを表したかったのですがこうしてみると、連続する英数字しか違いないですね(^^;)

ブラウザによる違いもありそうです。。

参考にしてみてください。