カード・バブル・チップなど、内容の長さに応じて幅が変わるべき小さなブロックにCJKテキストを入れると、短いテキストでも一文字ずつ縦に並ぶ「縦書き化」のような崩れ方をすることがある。

原因: 固定幅（例: width: 120px）や狭いmax-widthだけを指定してwidth自体を指定していない場合、ブラウザはブロックを実際の内容幅よりも狭くレイアウトしようとし、その上でword-break: break-allやoverflow-wrap: anywhereを併用していると、CJKは単語区切り（空白）がないため任意の文字で強制改行され、結果的に1文字1行の縦並びに見える。ラテン文字では単語境界があるため同じ設定でも目立たない。

適用条件: ノード・カードなど、短いテキストは1行に収まり、長いテキストのみ自然に折り返したいケース。常に固定幅で良い列やテーブルには不適切。

対処方法: width: max-content（コンテンツ幅に自然に合わせる）+ max-width: <上限px>（長文の上限だけ制限）の組み合わせにし、word-break: break-allは使わずoverflow-wrap: break-word（単語/文字境界でのみ必要なら折り返す）にする。これにより短文は1行のまま幅に合わせて広がり、長文のみmax-widthで自然に折り返される。

確認方法: 実際の日本語長文（数十文字程度）を入れた状態でスクリーンショットを目視確認する。短いテキストでは1行に収まり、長いテキストでは語彙境界で自然に複数行になれば正常。逆に短い文でも文字が縦に並んでいれば、width指定が不足している可能性が高い。

教訓: CJKテキストの折り返し問題はword-break/overflow-wrapの設定値だけでは解決しないことがあり、コンテナ自体のwidth指定（固定か自己サイズか）を合わせて確認する必要がある。ラテン言語のテキストだけで検証したレイアウトはCJKで別の崩れ方をすることがある。