こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
海外向けのWebサイトや英語のコンテンツを扱っていると、
「どうしても単語の途中で不自然な改行が発生してしまう」
そんな経験はありませんか？
特に欧文は日本語と異なり、単語の途中で改行されると読みにくく、行のバランスが崩れてしまいます。
この問題をCSSだけで自然に解消する手段が、hyphens: auto; です。
このプロパティを使えば、文章の中で適切な場所に自動的にハイフン（‐）を挿入しつつ自然に改行され、可読性も見た目も大きく向上します。
hyphensプロパティとは？
hyphens は、CSSのテキスト関連プロパティの一つ。
主に欧文テキストで使われ、長い単語をハイフンで区切って改行するかどうかを指定できます。
- none：ハイフンを挿入せず、改行も行わない
- manual：HTMLに ­（ソフトハイフン）を明示的に記述した箇所のみ改行
- auto：ブラウザが自動で適切な位置にハイフンを挿入・改行
実装はたったこれだけ
.article-text {
hyphens: auto;
word-wrap: break-word;
} HTML側に特別な記述は必要ありません。
ブラウザ側で自動的に処理してくれます。
使用例：Before / After
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
nary circum-
stances sur-
rounding the
incident remain unclear.
長い単語が自然に改行され、行のリズムや視線の流れが整っていますよね。
言語設定がポイント
hyphens: auto; を使用するには、HTMLまたはCSSで言語を明示する必要があります。
- HTMLに
lang="en"を追加 - またはCSSで
html { lang: en; }のように指定
これがないと、ブラウザがどの言語に基づいてハイフン処理すべきか判断できません。
対応ブラウザ
2025年時点での主な対応状況はこちら
- ✅ Safari：◎
- ✅ Firefox：◎
- ✅ Chrome：◎（バージョン105以降で安定）
- ❌ Edge：可（Chromiumベース以降はOK）
まとめ
自然な欧文の改行はユーザーのストレスを減らします！
CSSのhyphens: auto を活用することで、欧文の改行を自動的に最適化できます。
ちょっとした一行で、英語コンテンツの読みやすさ・デザイン性・可読性が段違いに向上。
特に企業サイトやランディングページなど、文章を読ませたいページで効果を発揮します。
「欧文テキストにちょっと違和感がある…」という方は、ぜひ導入してみてください！
