いつも迷うので改行と単語の折り返しの仕方、覚書。。。
white-space は、ソース中のスペース・タブ・改行の扱いをどう表示するかを指定するもの 指定できるステイタスと効果は以下
| 指定値 | 半角スペース | 改行の扱い (改行するか) | はみ出す場合 (自動折り返し) |
|---|---|---|---|
| normal | 縮省 | × | ○ |
| nowrap | 縮省 | × | × |
| pre | そのまま表示 | ○ | × |
| pre-wrap | そのまま表示 | ○ | ○ |
| pre-line | 縮省 | ○ | ○ |
| ※1： | 「半角スペース：縮省」の場合、連続するスペースは半角スペースひとつにまとめられる(タブも) |
| ※2： | 「改行の扱い」が「×」の場合、改行は半角スペースになる |
例:下記のようなテキストがある場合
AAA(半角スペース４つ)BBBB (改行) (改行) CCCCCCC ZZZZZZZZZZZZZZZ
幅の狭い領域にて normalを指定すると
AAA BBBB
CCCCCCC
ZZZZZZZZZZZZZZZ
（自動で折り返し、改行と空白は空白ひとつに。） nowrapを指定すると
AAA BBBB
CCCCCCC
ZZZZZZZZZZZZZZZ
（自動折返なし、改行と空白は空白ひとつに） pre
AAA BBBB
CCCCCCC
ZZZZZZZZZZZZZZZ
（自動折返なし、改行と空白はそのまま再現） pre-wrap
AAA BBBB
CCCCCCC
ZZZZZZZZZZZZZZZ
（自動折返有り、改行と空白はそのまま再現） pre-line
AAA BBBB
CCCCCCC
ZZZZZZZZZZZZZZZ
（自動折返有り、改行はそのまま再現、空白は空白ひとつに）
■上記の white-space の指定が「自動で折り返す」タイプになっている場合に、単語の折り返し方を指定するCSSが二種類ある 「word-break」と「overflow-wrap (旧word-wrap)」 ※overflow-wrap はCSS3仕様で word-wrap の名前が変更されたもの。 ■それぞれの違い word-break:break-all;は、領域からはみ出す場合、単語の途中だろうと問答無用でぶった切って折り返す。 overflow-wrap:break-word;は、単語の切れ目(スペース)を考慮しながら折り返す。 例：下記のような文章があった場合
AAAAAAAAAAAAAAAA BBBBBBBBBB
word-break: break-all;だと
AAAAAAAAAAAAAAAA BBBBBBBBBB
(単語の途中でも折り返す) overflow-wrap:break-word;だと
AAAAAAAAAAAAAAAA BBBBBBBBBB
(単語の切れ目=半角スペースを考慮して折り返す) どちらも領域に収まらないほど長い単語は途中で折り返す。 ただし、「overflow-wrap」だと、途中にスペース等が入っていればそこで折り返してくれる。 word-break: break-all;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
word-break:normal;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
※↑の例では領域より長い単語がないため、overflow-wrap:break-word;は指定してもしなくても同じ結果に。 領域より長い単語を含めると↓ (word-break:normal;overflow-wrap:normal;)
Loremipsumdolorsitametconsecteturadipiscingelitseddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
overflow-wrap:break-word;を指定すると、領域より長い単語に関しては単語の途中でも折り返される
Loremipsumdolorsitametconsecteturadipiscingelitseddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
☆注意点！
※word-break:break-all;は禁則処理を無視してしまうので、例えば「or」の間で折り返されてしまったり、「。」だけ折り返されてしまったりすることがあります。「とにかく折り返せ、細かいことは気にしない」と言う人向け
※overflow-wrapは幅の指定が必須
幅が未指定の場合、どこで折り返すのか計算できず、折り返されない場合がある。
そのような場合でも、とにかくはみ出したくない場合は「break-word:break-all;」を指定しておけば折り返される。
※表示領域が広がってしまう場合は「BOXSIZING」と「MARGIN」の設定も確認
※とりあえず word-break:break-all; を指定しておけば必ず折り返されるが、word-break:break-all;が指定されているとoverflow-wrapは順番関係なく無視されてしまう（word-break:break-all;のほうが優先される仕様の模様）なので、overflow-wrapを使いたい場合はword-breakを解除(word-break:normalを併記)してやる必要あり。
個人的な結論メモ
方針：
基本的に全て折り返す
単語の途中でも必ず折り返す
white-space:(normal / pre-wrap); 改行の有無でどちらか指定
overflow-wrap:break-word;
word-break:normal;
width:100%;で統一しておけば概ね良いはず。
コメント