【CSS】word-break - 単語中の改行

CSSのword-breakプロパティについて解説します。

検証環境

CSS

macOS

14.1

word-break

word-breakは“単語中の改行”のプロパティです。

HTMLドキュメントをWebブラウザで表示した際に、次のようにテキストがコンテンツ領域からはみ出すケースがあります。

プレビュー

はみ出るタイミングの部分が単語中（スペースや改行以外）である場合、改行するかどうかをword-breakプロパティによって制御することが可能です。

基本構文

word-break: 値;

値

代表的な値は次の通りです。

値	動作
normal	規定の動作
break-all	単語中でも改行する
keep-all	単語中は改行しない

サンプル

各値のサンプルを示すにあたり、次のプロパティを合わせて使用します。

プロパティ	説明
width	横幅
background	背景

normal

sample.html

<style>
p {
    width: 100px;
    background: lightgray;
    ___ih_hl_start
    word-break: normal;
    ___ih_hl_end
}
</style>

<p>CascadingStyleSheets.</p>

プレビュー

break-all

sample.html

<style>
p {
    width: 100px;
    background: lightgray;
    ___ih_hl_start
    word-break: break-all;
    ___ih_hl_end
}
</style>

<p>CascadingStyleSheets.</p>

プレビュー

keep-all

sample.html

<style>
p {
    width: 100px;
    background: lightgray;
    ___ih_hl_start
    word-break: keep-all;
    ___ih_hl_end
}
</style>

<p>CascadingStyleSheets.</p>

プレビュー