【HTML/CSS】画面幅に応じた自然なテキスト改行方法「inline-block」

概要

この記事では、HTMLとCSSを使用して、画面幅に応じてテキストが自然に改行する方法を紹介します。具体的には、以下のステップに従って説明を進めます。

1. "span"タグでテキストを区切る

2. spanタグに付与していたclass属性に"display: inline-block;"プロパティ指定

インラインブロック要素としての振る舞い

・インライン要素の特性(テキストなどと同じ行に表示される)
・ブロック要素の特性(幅や高さを指定)
以上の両要素を持ち合わせています。
なので、「インラインブロック」が適用された要素は、テキストの流れの中でそれぞれ独立したブロックとして扱われます。

コード

HTML

<h2>
    <span class="phrase">美しい朝を迎える、</span>
    <span class="phrase">心地よい一日の始まり。</span><br>
    <span class="phrase">全てを包み込む、</span>
    <span class="phrase">穏やかな光と共に。</span>
</h2>

CSS

.phrase {
    display: inline-block;
}