2015.02.13 [金]
word-break,word-wrap,white-space
単語・文字・文章の改行規則
基本的に全て英語に対する指定であって、日本語に対して禁則を指定することはできない。
日本語は単語の途中でも改行されて枠外に飛び出さないが、keep-all,pre,nowrap を指定した時だけは枠外に飛び出す。
word-break : ____ ;
枠内の改行方法の指定。
- normal改行される。（デフォルト）
（日本語は単語の途中であっても改行され、飛び出さない。）
ただし長い英単語だと枠から飛び出す。 - kepp-all1行が改行されず、枠外に飛び出す。
- break-all枠内の改行は全て無視され、全て続けて表記されるが、単語の途中でも全て折り返されて枠外には飛び出さない。
- loose
- break-strict
word-wrap : ____ ;
枠の中で単語が長すぎて収まらない場合、単語の途中でも改行するかどうかを指定する。
（どちらにせよ日本語は飛び出さない。）
- normal単語が長くて収まり切らない場合、枠から飛び出す。（デフォルト）
- break-word単語が長すぎて枠の端で収まらない時だけ、単語の途中で改行される。
white-space : ____ ;
ソースコード中の改行、非改行規則の指定
- normal連続した半角スペース、タブ、改行を、1つの半角スペースとして表示する。<br>は無視されるが、枠の端では自動改行される。
- pre改行もスペースもソースコードに書かれたそのままを表示。<br>は使えるが、枠の端で自動改行はされず、1文が長ければ枠外へ飛び出す。
- nowrap改行指定<br>は無視されて改行されず、1文が長ければ枠外へ飛び出す。
- pre-wrap基本的にpre同様、半角スペース改行などソースコードがそのまま表示されるが、枠外へは飛び出さず、自動改行される。
- pre-line基本的にnormal同様、連続した半角スペース、タブが1つの半角スペースとして表示され、枠の端で自動改行もされるが、<br>でも改行が可能。
- 関連記事
-
-
インライン要素ブロック要素
2015/02/04
-
a:link { の順序
2015/02/11
-
word-break,word-wrap,white-space
2015/02/13
-
CSS text-align:justify;
2015/04/04
-
色の数値表（白黒系のみ）
2018/01/21
-
コメントの投稿