CSSで単語ごとに改行を強制する方法を完全網羅！サンプルコード付き解説
2024-07-27
CSSで要素内の単語ごとに改行を強制する方法
方法 1: word-break プロパティを使う
word-break プロパティは、長い単語が要素の境界に達した際に、単語の途中で改行するかどうかを制御します。このプロパティには以下の値を設定できます。
normal：デフォルト値。言語の規則に従って改行されます。break-all：単語の途中で改行を許可します。break-word：単語の区切りで改行しますが、場合によっては単語内でも改行します。
.example {
word-break: break-all;
}
注意点
break-allは、日本語の場合、単語の意味が損なわれる可能性があります。keep-allは、長い単語が要素からはみ出てしまう可能性があります。
方法 2: white-space プロパティを使う
white-space プロパティは、要素内の空白文字の扱い方を制御します。このプロパティには以下の値を設定できます。
normal：デフォルト値。ブラウザによって挙動が異なります。pre：空白文字をすべて保持し、改行も反映します。pre-wrap：改行を許可しますが、単語の途中で改行することはありません。pre-line：改行を許可し、単語の途中で改行することもできますが、ブラウザによって挙動が異なる場合があります。
.example {
white-space: pre-wrap;
}
preは、改行を含むすべての文字を保持するため、レイアウトが崩れる可能性があります。
方法 3: display プロパティと inline-block を使う
display プロパティを inline-block に設定すると、要素がインライン要素とブロック要素の両方の特性を持つようになります。このとき、単語ごとに <wbr> タグを挿入することで、改行を強制することができます。
.example {
display: inline-block;
}
.example span {
white-space: nowrap;
}
.example span:after {
content: ' ';
white-space: pre;
}
- HTML構造が複雑になるため、メンテナンス性が低くなります。
- ブラウザによっては、意図したように表示されない場合があります。
実用的な解決策
上記の方法にはそれぞれ注意点があるため、状況に応じて適切な方法を選択する必要があります。一般的には、以下の方法がおすすめです。
- 日本語の場合:
word-break: break-wordを使用します。ただし、単語の意味が損なわれる可能性があることに注意する必要があります。 - 英語の場合:
white-space: pre-wrapを使用します。 - レイアウトを重視する場合:
display: inline-blockとwbrタグを使用します。
- 上記以外にも、JavaScriptを使用して改行を強制する方法もあります。
- CSSの仕様は、ブラウザによって異なる場合があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで単語ごとに改行</title>
<style>
.example {
word-break: break-all;
}
</style>
</head>
<body>
<div class="example">
これは長い文章です。単語ごとに改行されます。
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで単語ごとに改行</title>
<style>
.example {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="example">
これは長い文章です。単語ごとに改行されます。
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで単語ごとに改行</title>
<style>
.example {
display: inline-block;
}
.example span {
white-space: nowrap;
}
.example span:after {
content: ' ';
white-space: pre;
}
</style>
</head>
<body>
<div class="example">
<span>これは</span><span>長い</span><span>文章</span><span>です。</span><span>単語ごとに</span><span>改行されます。</span>
</div>
</body>
</html>
auto：ブラウザによって挙動が異なります。none：ハイフンによる改行を禁止します。manual：手動でハイフンを挿入する必要があります。
.example {
hyphens: manual;
}
.example span::after {
content: '-';
}
manualを選択した場合、すべての単語にハイフンを挿入する必要があります。- ハイフンが意図しない場所に挿入される可能性があります。
方法 5: letter-spacing プロパティと text-justify プロパティを使う
letter-spacing プロパティは、文字間の幅を設定します。text-justify プロパティは、テキストを左右両端揃えにします。これらのプロパティを組み合わせることで、単語ごとに改行を強制することができます。
.example {
letter-spacing: 9999px;
text-justify: justify;
}
- 非常に多くの文字間スペースが挿入されるため、レイアウトが崩れる可能性があります。
方法 6: overflow-wrap プロパティを使う
overflow-wrap プロパティは、要素内のテキストが要素からはみ出た際に、どのように折り返すかを制御します。このプロパティには以下の値を設定できます。
normal：デフォルト値。テキストが要素からはみ出ます。break-word：単語の区切りで改行します。anywhere：任意の場所で改行します。
.example {
overflow-wrap: anywhere;
}
css line-breaks
