WordPress投稿の改行（折り返し）位置をCSSで調整する

WordPressの投稿で改行するにはbrでの制御が基本になりますが、画面サイズによっては中途半端な位置で改行される懸念もあります。

CSSの改行に関するプロパティを指定することで、改行位置を少し制御して見た目を調整することが可能です。どういったプロパティがあるか見ていきましょう。

改行の位置を制御するCSSプロパティ

日本語の意味のある塊で折り返してもらうための指定として、word-break: auto-phraseがあります。日本語の不自然な位置で改行されたくない場合は指定しておきましょう。

lang="ja"とセットで使います。

本文は基本的には自然な改行で良い気がしますが、見出しなどの数行で重要なテキストが並んでいる場合に指定しておくと読みやすくなるかと思います。

.wp-block-heading {
	word-break: auto-phrase;
}

文章の最後の1行に対するアプローチとして、text-wrap: prettyがあります。段落またはテキストの最後に単独で表示される単語を防ぐことができます。

基本的には英語に対するアプローチなので、例えば以下のような形で、英語で設定されたテキストに対して設定すると最後の1行が読みやすくなるはずです。

.wp-block-post-content :lang(en) {
  text-wrap: pretty;
}

改行が発生すると行ごとに文字数が異なります。行ごとの文字数が気になるケースとして、文字を中央に揃えている場合です。

text-wrap: balanceを使うと、行ごとの文字数のバランスを取ってくれるようになります。

WordPressの場合は、編集画面から「中央揃え」を指定した際に.has-text-align-centerのクラスが付与されます。このクラスに対して文字数のバランスと最後の一行の指定をしておくと、画面幅が変化しても中央揃えのテキストの見栄えが少し読みやすくなるかと思います。

.has-text-align-center {
  word-break: auto-phrase;
  text-wrap: balance;
}

overflow-wrap: anywhereを指定することで、長い単語・URL・英数字がレイアウトを壊さないように、どこでも改行してOKとすることができます。

意図せずはみ出ないように設定しておくと安心です。

:root {
	overflow-wrap: anywhere;
}

hyphens: autoを指定すると、英単語の途中で改行となる場合にハイフンが付くようになります。指定がない場合は単語ごとの改行になるのでなくても問題はないのですが、見出しなど大きな文字で単語ごとだとバランスが取りづらいなどあれば候補としてあるかと思います。

.wp-block-heading:lang(en) {
	hyphens: auto;
}

word-break: auto-phraseやtext-wrap: balance、text-wrap: prettyは、ブラウザのバージョンによって動かない可能性もあります。

とはいえ、動かない場合は通常の折り返しの動きになるだけですので、実質的な影響はないかと思います。

改行に関してどのCSSプロパティを使うかは以下の記事が大変参考になります。