word-break: auto-phraseで日本語を文節改行。lang属性がないと文節で切れなかった

公開 2026.10.09約3分で読めます

TL;DRこの記事の要点

目次6項目

日本語の見出しを折り返すと、「た」だけの行ができたり、単語の途中で切れたりします。
CSSの指定で、これを文節の区切りに寄せる方法があります。
それが、word-break: auto-phraseです。

🎥 この記事の内容は動画でも解説しています。

アイキャッチ画像138枚の作り直しで、この指定を使いました。
生成はCodexです。
基本と一緒にまとめます。

word-break: auto-phraseとは？

MDNでは、word-break: normalと同じ効果がある値、と説明されています。
加えて、言語に合わせて、自然なフレーズの途中に区切りを置かないよう分析します。
日本語では、文節の途中での改行を避ける方向に働きます。

MDNでは、実験的な機能です。
機械学習の仕組み「BudouX」をもとに、Chromiumが組み込んだものです。
対応はChromeとEdgeの119以降で、Can I useによると、FirefoxとSafariの正式版は未対応です。

アイキャッチでは、auto-phraseとtext-wrap: balanceを併用しています。

.title {
	word-break: auto-phrase;
	text-wrap: balance;
}

text-wrap: balanceは、各行の文字数のバランスを整えて折り返す指定です。
見出しのような短い文に向いています。
MDNによると、Chromiumでは6行以下のブロックだけが対象です。

もうひとつ必要なのは、HTMLのlang="ja"。
HTML側の指定です。
ICS MEDIAの記事にも、日本語であることを明示するために、この指定が必要と書かれています。

<html lang="ja">

同じタイトル「WordPressのカテゴリを親子変更したら古いURLでも表示された原因と301転送」を、3つの指定で比べました。
Chrome 154のヘッドレスで、1200×630の画像にしています。
実測です。

1つ目は、指定なし。

WordPressのカテゴリを親子
変更したら古いURLでも表示さ
れた原因と301転送

2つ目は、langなしでauto-phraseとbalanceを指定した場合。

WordPressのカテゴリを
親子変更したら古いURLで
も表示された原因と301転送

3つ目は、lang="ja"あり。

WordPressのカテゴリを
親子変更したら古いURLでも
表示された原因と301転送

指定なしでは「表示さ／れた」、langなしでは「URLで／も」と途中で切れました。
lang="ja"を付けた3つ目では、この分割がなくなっています。
2つ目と3つ目は、同じCSS指定。
違うのは、lang属性の有無だけです。

「Claude Code」のような英語の固有名詞は、スペースで折り返されます。
割れるのは、その間。
スペースが、折り返せる位置に見えるためです。

原因は、スペースです。
cat’s handのアイキャッチでは、短い英語の固有名詞のスペースを、改行されない空白（U+00A0）に置き換えてから、画像を生成するルールにして、手順書にも残しています。

ICS MEDIAの記事にも、ときおり意図しない位置で折り返すことがある、とありますが、自分のアイキャッチでも、「確認方法」が「確認方／法」になる例がありました。
そこでClaude Codeが、画像を生成するスクリプトに、タイトルの中のnで手動改行する機能を足しました。

ブラウザで見る本文には未対応のブラウザがあり、そこでは文節での折り返しは期待できないので、Webページで使うときは、未対応のブラウザでの折り返しも確認しておきます。
見出しのような短い文なら、試しやすい指定です。

アイキャッチ画像は、ヘッドレスのChromeで画像にしてしまうので、閲覧するブラウザの対応は関係ありません。
画像の中は、Chromeで見た形のまま固定されます。

迷ったら、まずlang。
text-wrap: balanceは、別の記事でも書いています。

この記事が参考になったら、応援クリックをお願いします

Cat's Handこの記事を書いた人

Web制作歴10年以上。WordPressのテーマカスタマイズやコーディングを中心に、副業・本業ともにweb制作に携わっています。このブログでは、実際に手を動かして分かったことを書いています。