word-break, overflow-wrapプロパティの動作の詳細はこちらの記事を参照してください。
スタイルシートにてwidthプロパティを設定し枠の幅を設定したにもかかわらず、文字がワードラップされず枠をはみ出してしまう現象と対策方法を紹介します。
スタイルシートで枠の幅を設定し、枠内のコンテンツに文字列を配置します。
通常の英文や日本語文であれば問題なく動作しますが、長い半角アルファベットの文字列(ASCII文字列)では改行されず、文字が枠をはみ出してしまいます。
この現象が発生した場合、スタイルシートのword-breakプロパティまたは、overflow-wrapプロパティを設定すると、改行の方式を変更できます。
ワードラップされない現象を再現します。
以下のコードを記述します。
.OuterFrame {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
border: solid 4px #0094ff;
}
.SimpleFrame {
margin-top:16px;
margin-left:16px;
margin-bottom:16px;
margin-right:16px;
border:solid 1px #808080;
width:200px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="wraptest.css" />
</head>
<body>
<div class="OuterFrame">
<div class="SimpleFrame">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</div>
<div class="SimpleFrame">あいうえおかきくけこさしすせそたちつてとなににぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
<div class="SimpleFrame">I awoke to a vision of a white ceiling above, The light streaming in through the window was so bright, It felt like being left behind in a world of pure white. A fleeting thought crossed my mind, Could this perhaps be heaven?</div>
<div class="SimpleFrame">目を覚ました。白い天井が見える。窓から差し込む光はまぶしく、まるで純白の世界に取り残された錯覚を持った。刹那考えが脳裏をよぎる、もしやこれは天国か。</div>
</div>
</body>
</html>
上記のHTMLファイルを表示すると下図の表示結果となります。日本語文字列のほうは枠の幅で改行されていますが、
英文字列のほうは文字が枠をはみ出してしまっていることがわかります。
ワードラップが行われず枠をはみ出している原因はword-wrapモードがデフォルトのみ指定状態では、"normal"に設定されているためです。
"normal"モードではワードラップは単語の途中で行われるため、切れ目のない文字列の場合ワードラップが行われず表示範囲が拡大されてしまいます。
対策は以下があります。
anywhere または break-word に設定する
break-all または break-word に設定するoverflow-wrap:anywhere;
または
overflow-wrap:break-word;
word-break:break-all;
または
word-break:break-word;
CSSファイルを以下のコードに変更します。
.OuterFrame {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
border: solid 4px #0094ff;
}
.SimpleFrame {
margin-top:16px;
margin-left:16px;
margin-bottom:16px;
margin-right:16px;
border:solid 1px #808080;
width:200px;
overflow-wrap: anywhere;
}
上記のHTMLを表示すると、下図の表示結果となります。
ワードラップが行われ、英文字の長い単語も枠から文字がはみ出さずに描画できています。
CSSファイルを以下のコードに変更します。
.OuterFrame {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
border: solid 4px #0094ff;
}
.SimpleFrame {
margin-top:16px;
margin-left:16px;
margin-bottom:16px;
margin-right:16px;
border:solid 1px #808080;
width:200px;
word-break:break-all;
}
上記のHTMLを表示すると、下図の表示結果となります。
ワードラップが行われ、英文字の長い単語も枠から文字がはみ出さずに描画できています。
Interenet Explorer での動作を紹介します。
ワードラップの設定をしない場合の表示を確認します。
以下のコードを準備します。
.OuterFrame {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
border: solid 4px #0094ff;
}
.SimpleFrame {
margin-top:16px;
margin-left:16px;
margin-bottom:16px;
margin-right:16px;
border:solid 1px #808080;
width:200px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="wraptest.css" />
</head>
<body>
<div class="OuterFrame">
<div class="SimpleFrame">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</div>
</div>
</body>
</html>
上記のHTMLファイルをIntrernet Explorer 表示すると下図の表示結果となります。英文字の長い単語の場合、文字が枠をはみ出してしまっていることがわかります。
Internet Explorer で長い英単語をワードラップさせる場合には、word-wrap プロパティを利用します。
word-wrap:break-word;
CSSファイルを下記に変更します。
.OuterFrame {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
border: solid 4px #0094ff;
}
.SimpleFrame {
margin-top:16px;
margin-left:16px;
margin-bottom:16px;
margin-right:16px;
border:solid 1px #808080;
width:200px;
word-wrap:break-word;
}
上記のHTMLを表示すると、下図の表示結果となります。
ワードラップが行われ、枠から文字がはみ出さずに描画できています。
