#009 posted on 2017.03.09[ update: 2017.03.10 ]

word-wrapとword-breakのメモ

cssのword-wrapword-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 :
    (有用性不明なので省略)
SHARE THIS ON...

- 人気記事 -