CSSの「text-wrap」と「word-break」での改行位置の制御｜BLACKFLAG

CSSの「text-wrap」と「word-break」での改行位置の制御｜BLACKFLAG

Webページ上に文章を掲載する際、末尾の一文字だけ改行してしまったり、改行位置のバランスに困ることが...概要を表示 Webページ上に文章を掲載する際、末尾の一文字だけ改行してしまったり、改行位置のバランスに困ることがよくあります。 レスポンシブの場合だと、PC表示では違和感のない改行位置だったとしても、SP表示で表示幅が変わることでテキストのバランスがおかしくなるようなこともしばしばありますが、そんな文章の改行位置を調整できるCSSの「text-wrap」と「word-break」の2つのプロパティでどのように改行位置が変化するかサンプルをもとに紹介してみます。 text-wrap まずはCSSの「text-wrap」プロパティから。 text-wrap – CSS: カスケーディングスタイルシート | MDN 「text-wrap」の値には以下のようなものがあります。 wrap  ※規定値 テキストは要素幅に合わせて改行 nowrap テキストを改行させない balance 各行の文字数を均等にするよ

• css