ワードラップ (word wrap) は、テキストが表示領域の右端に達したとき、自動的に次の行に折り返す処理です。テキストエディタ、ブラウザ、メールクライアント、SNS の投稿画面など、テキストを表示するあらゆるソフトウェアに実装されています。ワードラップがなければ、長い文章は画面の右側にはみ出し、水平スクロールしなければ読めなくなります。

英語のワードラップは比較的単純です。単語間のスペースが自然な折り返し位置になるため、スペースの位置で行を切れば単語が途中で分断されることはありません。ただし、非常に長い単語 (URL やドイツ語の複合語など) がある場合は、単語の途中で強制的に折り返す必要があります。CSS の overflow-wrap: break-word はこのケースに対応します。

日本語のワードラップは複雑です。日本語にはスペースによる単語区切りがないため、原則としてどの文字の後ろでも折り返せます。しかし、行頭に句点「。」や読点「、」が来る (行頭禁則)、行末に始め括弧「（」が来る (行末禁則) といった禁則処理のルールがあります。CSS の line-break プロパティで禁則処理の厳密さを制御でき、strict (厳密)、normal (標準)、loose (緩い) の 3 段階があります。

CSS には行折り返しに関する複数のプロパティがあります。word-break は単語の途中での折り返しを制御し、break-all で任意の位置で折り返せます。overflow-wrap (旧 word-wrap) は、通常の折り返し位置で収まらない場合にのみ単語を分割します。hyphens: auto を指定すると、折り返し位置にハイフンを自動挿入して単語を分割します (言語辞書が必要)。

ソフトハイフン (U+00AD) は、ワードラップの制御に使える不可視文字です。長い単語の中にソフトハイフンを挿入しておくと、その位置で折り返しが必要になったときだけハイフンが表示されます。折り返しが不要な場合は完全に不可視です。文字数カウントではソフトハイフンを含めるかどうかが問題になり、見た目の文字数と内部の文字数が一致しない原因の一つです。

1 行あたりの文字数は可読性に直結します。欧文では 1 行 45〜75 文字 (理想は 66 文字) が読みやすいとされ、日本語では 1 行 25〜40 文字が推奨されます。ウェブデザインでは max-width や ch 単位で行長を制御し、ワードラップと組み合わせて最適な読書体験を設計します。