[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です。