ミギムキ

[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」にすると、括られた文字が改行しないように制御されます
  • 文章の継ぎ目継ぎ目をくくることで、表示枠に収まるならそのまま表示。収まらないなら改行して表示することができます