#009
posted on 2017.03.09[ update: 2017.03.10 ]
word-wrapとword-breakのメモ
cssのword-wrapとword-breakの設定をすぐ忘れるのでメモ。
1. 両端揃え、英語単語の分割禁止
英単語間もしくは日本語文字間のスペースが拡がって調整。
{
word-wrap: break-word;
word-break: normal;
text-align: justify;
}
2. 両端揃え、英語単語の分割許可
両端揃うが英単語の途中でも改行発生。
{
word-wrap: break-word;
word-break: break-all;
text-align: justify;
}
3. 両端揃えず、英語単語の分割禁止
右端は揃わない。
{
word-wrap: break-word;
word-break: normal;
text-align: left;
}
word-wrap / 単語の分割(日本語は無関係)
-
normal :
単語に対して、改行タグのみで改行。(初期値)・・・表示域からoverflowする -
break-word :
単語に対して、改行タグ以外でも改行。・・・表示域からoverflowしない
word-break / 単語の分割
-
normal :
英数単語は分割禁止(初期値) -
keep-all :
日本語、英語ともにスペースのみで改行。 -
break-all :
単語の分割許可。 -
loose :
(有用性不明なので省略) -
break-strict :
(有用性不明なので省略)