最後の仕上げに、CSS講座

P-1.強制改行と禁則処理 ページ9

##

【画像1/リンク】

ちなみにこれは、圧縮して改行が0になったこの作品に使われているCSSです。

なんか、改行おかしいですよね。
途中で画面から突き抜けたり、逆に3割くらいで改行されたり。

ちゃんと端で改行させるプロパティです。

▶ソース【𝕤𝕠𝕦𝕣𝕔𝕖】
{
word-break:値1;
line-break:値2;
}

値1(word-break)に入れられるもの
normal→改行方法の指定がない。多分ほぼ変わらない。
keep-all→日本語、中国語、韓国語の単語の途中では改行されない。
break-all→line-breakプロパティで禁止されない限り、どこでも改行する。
break-word→適切に改行できる場所が他にないときは、単語の途中で改行する。ただし非推奨の値。

値2(line-break)に入れられるもの
auto→特に指定せず、ブラウザに任せる。
loose→必要最低限の禁則処理をする。
normal→通常の禁則処理をする。々 … : ; ! ? などは行頭に送られない。
strict→normalに加え、小さい仮名文字と- ー 〜 ― も行頭に送られない。
anywhere→文章のどこでも改行する可能性がある。


私は基本的に
#desc,#u_result,textarea{
word-break:break-all;
line-break:strict;
}
という設定です。

こうすると変な改行もなくなり、「。」などが行頭に来ることもないのでお勧めです。

▶まとめ【𝕤𝕦𝕞𝕞𝕒𝕣𝕪】
【word-break】は、改行設定。
【line-break】は、禁則処理の設定。

P-2.入力コントロール中→←S-5.作品評価欄

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す