ミギムキ

[CSS] 文字をちょうどいいところで改行させたい

やりたいこと

サンプルコード

CSS

h1 > span, h2 > span, h3 > span, h4 > span, h5 > span, h6 > span { display: inline-block; }

html

<h1><span>いともたやすく</span><span>行われる</span><span>えげつない行為</span></h1>

仕組み、解説、補足など

  • displayを「inline-block」にすると、括られた文字が改行しないように制御されます
  • 文章の継ぎ目継ぎ目をくくることで、表示枠に収まるならそのまま表示。収まらないなら改行して表示することができます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。