横幅を指定したブロック要素であっても半角スペース等の区切りを含められていないひとつながりの英文は自動で改行されません。その対処法を説明します。
目次
半角スペースや”/”が含まれない場合は改行されない
以下のサンプルを見るとわかるようにhttp://www.sample.com語の”/”では改行されていますがabcd…と続く長い文は改行されずボックスを突き破ってしまいます。通常このような英文は存在しませんがアドレス等で使用される事もあるでしょう。
日本語の場合はこのような症状は現れません。これは英文の特性によるものです。
改行されない英文の例
http://www.sample.com/abcdefghyjklmnopqrstyvwxyzabcdefghyjklmnopqrstyvwxyzabcdefghyjklmnopqrstyvwxyz
対処法｜word-wrapプロパティを指定する
スタイルにword-wrapプロパティを指定する事でブロック要素の端で改行するように指定できます。指定方法は以下の通りです。
/*改行させたい要素に指定*/
p.sample{
word-wrap: break-word;
}
word-wrap属性を指定した例
http://www.sample.com/abcdefghyjklmnopqrstyvwxyzabcdefghyjklmnopqrstyvwxyzabcdefghyjklmnopqrstyvwxyz
