cssで文字列を折り返す時のword-breakとword-wrapって結局どう違うんだっけ?


いつも忘れてしまうシリーズ、、、

word-breakとword-wrapの違いってなんだっけ?

文字列がdivなどからはみ出してしまう時の制御方法はword-break、word-wrapやwhite-spaceがあるわけですが、毎回、

「、、、で、どれ使えばいいんだっけ?」

となってしまうのは俺だけ?

最近忘れちゃうやつは自分のブログに書いとけ、ってことで今更な内容もエントリー。

———————-
まずwhite-spaceは英数字が折り返されないのでNG。
word-breakはブラウザ依存があるのでNG。
word-wrapは主要ブラウザ全てOK。

ということで、現実的に

word-wrap:break-word;

を選択で決まり!
———————-

これらの記事を参考にさせていただきました。

より詳しく知りたい方はこちらをどーぞ。
『word-breakプロパティとword-wrapプロパティの違い』
http://www.coolwebwindow.com/csstips/csstechnic/000283.php

こちらにはすべてのサンプルがありました。
『ブロックから文字がはみ出してしまう場合の対処方法』
http://web-dou.com/css/etc_word_wrap2.html

ありがたや。ありがたや。


Add a Comment

メールアドレスが公開されることはありません。

CAPTCHA


This blog is kept spam free by WP-SpamFree.