STEP 1
単語の途中で改行される
日本語の文章は、どの文字の間でも改行されます。幅の狭い見出しやボタンでは、「勉強会」が「勉強」と「会」に分かれるように、単語の途中で行が変わります。右下の角をドラッグして幅を変えてみてください。
CSSの新しい機能を触りながら学ぶ勉強会を来月開催します
STEP 2
文節の区切りで改行する
word-break: auto-phrase を指定すると、ブラウザーが文章を文節に分け、文節の区切りで改行します。lang="ja" の要素だけが対象です。
CSSの新しい機能を触りながら学ぶ勉強会を来月開催します
text-wrap: balance を合わせると、各行の長さもそろいます。
CSSの新しい機能を触りながら学ぶ勉強会を来月開催します
使っている機能
word-break: auto-phrase- 日本語の文章を文節に分け、文節の区切りで改行する。対応していないブラウザーでは normal と同じ動きになる
lang="ja"- 文節に分けるのは、言語が日本語の要素だけ。html 要素に指定してあれば子孫にも引き継がれる
text-wrap: balance- 各行の長さをそろえる。auto-phrase と合わせると、見出しが読みやすく折り返される
CSS
/* 文節の区切りで改行する */
.phrase-auto {
word-break: auto-phrase;
}
/* 各行の長さをそろえる */
.phrase-balance {
text-wrap: balance;
}HTML
<p lang="ja" class="phrase-heading phrase-auto">CSSの新しい機能を触りながら学ぶ勉強会を来月開催します</p>