エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

【HTML】日本語でも、単語区切りで自動改行をする【929日目】

改行を単語区切りにしたい

英語では、単語と単語の間にスペースがあります。
従って、単語区切りで改行ということが可能で、ブラウザで自動的に単語単位で改行をしてくれます。

日本語は単語区切りというものがないです。
なので、『焼肉定食』という文字が途中で枠に収まらなくてもぶった切って改行します。

f:id:willow710kut:20200427192337p:plain

これを単語で区切りたい。

f:id:willow710kut:20200427192415p:plain

このように。

でも、スペースという区切り方が日本語にはないので、どうするか。

タグでくくる+CSSを書く

タグでくくってあげましょう。

<div class="box2">ああああああああああああああああ<span class="aaa">焼肉定食</span></div>

これで、焼肉定食という単語の区切りがあることが明示出来ました。
そして、改行に対応するには以下の内容を加えます。

.aaa {
  display: inline-block;
}

単語区切りにしたいものを、インラインブロック要素にしましょう。
これで、日本語にも単語の区切りが生まれました。

こんなふうに、
HTMLの気持ちになると、いろんな要件に対して、どのように対応するかが思いつきやすいかもしれないですφ(・