CSS属性word-wrap：コンテナ内の単語の折り返し方法を制御する
word-wrap属性を使用すると、テキスト行の末尾で長い単語（通常は、ハイパーリンクやコードなど、自然な区切りやスペースのない長い単語）をどのように処理するかを制御できます。この属性は、長い単語を強制的に1行に保持するか（水平スクロールバーが表示される可能性があります）、単語内で改行してコンテナの幅に合わせるかを決定します。
1. 構文と値
word-wrap属性の構文は、プロパティ名と値で構成されます。
word-wrap: 値;
word-wrap属性には、次の3つの値を設定できます。
normal：デフォルト値。長い単語は次の行に折り返されますが、単語の境界（スペース、ハイフンなど）でのみ折り返されます。break-word：コンテナの幅に合わせて、単語内で改行できます。これにより、コンテンツがコンテナからはみ出すのを防ぐことができます。inherit：親要素からword-wrap属性の値を継承します。
2. ブラウザの互換性
word-wrap属性は、もともとMicrosoft独自の属性でしたが、後に他のブラウザにも採用されました。
次の表は、主要なブラウザにおけるword-wrap属性のサポート状況を示しています。
| ブラウザ | バージョン | サポート状況 |
|---|---|---|
| Chrome | すべて | ✅ |
| Firefox | すべて | ✅ |
| Internet Explorer | 5.5+ | ✅ |
| Safari | すべて | ✅ |
| Opera | すべて | ✅ |
3. overflow-wrap属性との関係
overflow-wrap属性は、word-wrap属性の新しい名前で、機能は同じです。 overflow-wrap属性は、より標準に準拠しており、すべての最新のブラウザでサポートされているため、こちらを使用することをお勧めします。 word-wrap属性は、後方互換性のために残されています。
4. 使用例
word-wrap属性の使用方法の例を以下に示します。
例1：word-wrap: normalを使用して、単語の境界で改行する場合
<div class="container">
これは、Thisisaverylongwordwithoutanyspaces.のように、非常に長い単語を含む段落です。
</div>
<style>
.container {
width: 200px;
border: 1px solid black;
word-wrap: normal;
}
</style>
この例では、コンテナの幅が200pxに設定されています。 word-wrap: normal;が設定されているため、長い単語は単語の境界でのみ改行されます。
例2：word-wrap: break-wordを使用して、コンテナの幅に合わせて単語内で改行する場合
<div class="container">
これは、Thisisaverylongwordwithoutanyspaces.のように、非常に長い単語を含む段落です。
</div>
<style>
.container {
width: 200px;
border: 1px solid black;
word-wrap: break-word;
}
</style>
この例では、word-wrap: break-word;が設定されているため、長い単語はコンテナの幅に合わせて単語内で改行されます。
5. よくある使用例
word-wrap属性は、次のような場合によく使用されます。
- 長いリンクやURLを含むテキストを処理する場合
- コード片を含むテキストを処理する場合
- 狭い列のレイアウトでテキストが正しく折り返されるようにする場合
まとめ
word-wrap属性は、Webページ上の長い単語の折り返し動作を制御するためのシンプルながらも効果的な方法を提供します。これにより、テキストがコンテナからはみ出すのを防ぎ、Webページの可読性とユーザーエクスペリエンスを向上させることができます。
関連QA
-
Q:
word-wrap属性とword-break属性の違いは何ですか？
A:word-wrap属性は、単語を改行するかどうかを制御しますが、word-break属性は、単語をどこで改行するかを制御します。 -
Q:
word-wrap属性が機能しないのはなぜですか？
A: 考えられる原因はいくつかあります。要素の幅が明示的に設定されていない、またはoverflowプロパティがhiddenに設定されているなどです。 -
Q:
word-wrap属性はすべてのブラウザでサポートされていますか？
A: いいえ、すべてのブラウザでサポートされているわけではありません。古いブラウザの中には、word-wrap属性をサポートしていないものもあります。その場合は、overflow-wrap属性を使用するか、他の方法で対応する必要があります。