プログラミング勉強日記
2021年3月10日
一昨日の記事からCSSでの改行ルールについてまとめてきた。その中でword-wrapプロパティの存在を知ったので、今日はword-wrapの使い方をまとめる。
word-wrapとは
word-wrapは、中途半端な位置でも強制的に改行をするプロパティである。通常、英数字は中途半端な位置では改行が行われないようになっている。そのため、古いブラウザでは画面幅以上に文字が突き抜けて表示されることがあった。(最近のブラウザでは滅多に見ないが、たまにスマートフォンでサイトを観覧したときに見かける)
こちらの記事でも書いたようにbrタグで改行することもできるが、多用してはいけないので、word-wrapを使用すると便利である。
wod-wrapの使い方
CSS
word-wrap: 値;
この値にはnoraml, break-wordを指定する。
normalは初期値で、単語の途中では折り返しを指定しない。
break-wordは、単語の途中でも強制的に改行を入れて文章をはみ出さなくする。
参考文献
HTMLでword-wrapプロパティで単語を改行する方法を現役デザイナーが解説【初心者向け】
CSSのword-wrapの使い方