単語での改行指定は「word-wrap」「overflow-wrap」「word-break」を指定します。
「word-wrap」(IE用)=「overflow-wrap」です。
「overflow-wrap」と「word-break」は微妙に違いますので下記サンプルをご確認ください。
CSS Ver. | 適用要素 | 継承 |
---|---|---|
2.1,3.0 | 全要素 | しない |
構文 | |
---|---|
overflow-wrap : normal | break; word-wrap : normal | break; word-break : break-word | break-all | loose | break-strict | keep-all; |
|
プロパティ/設定値 | 意味 |
overflow-wrap : normal; overflow-wrap : break; |
枠(ブロック)をはみ出しても単語を優先 デフォルト:「タグ毎のスタイル初期値」を参照 |
word-wrap : normal; word-wrap : break; |
「overflow-wrap」と同じ(IE用) デフォルト:「タグ毎のスタイル初期値」を参照 |
word-break : break-word; word-break : break-all; word-break : loose; word-break : break-strict; word-break : keep-all; |
単語より枠(ブロック)を優先 デフォルト:「タグ毎のスタイル初期値」を参照 |
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css_word_wrap_normal{
word-wrap : normal; /* IE */
overflow-wrap : normal;
}
.css_word_wrap_break{
word-wrap : break; /* IE */
overflow-wrap : break;
}
.css_word_break_normal{
word-break : break-word;
}
.css_word_break_break_all{
word-break : break-all;
}
.css_word_break_loose{
word-break : loose;
}
.css_word_break_break_strict{
word-break : break-strict;
}
.css_word_break_keep_all{
word-break : keep-all;
}
<!-- html -->
<div class="common">
<div class="cssTitle">overflow-wrap : normal;</div>
<div class="css_word_wrap_normal">
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
</div>
<div class="cssTitle">overflow-wrap : break;</div>
<div class="css_word_wrap_break">
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
</div>
<div class="cssTitle">word-break : break-word;</div>
<div class="css_word_break_normal">
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
</div>
<div class="cssTitle">word-break : break-all;</div>
<div class="css_word_break_break_all">
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
</div>
<div class="cssTitle">word-break : loose;</div>
<div class="css_word_break_loose">
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
</div>
<div class="cssTitle">word-break : break-strict;</div>
<div class="css_word_break_break_strict">
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
</div>
<div class="cssTitle">word-break : keep-all;</div>
<div class="css_word_break_keep_all">
アメリカで町名が一番長いのは「Chargoggagoggmanchauggagoggchaubunagungamaugg」でマサチューセッツ州だそうです。日本では「京都府京都市東山区三条通南二筋目白川筋西入ル二丁目北木之元町」とのことです。
</div>
</div>
ブラウザで一部異なるため注意が必要です。