CSSのword-breakで長い単語の折り返し方法を指定する方法をわかりやすく解説

word-breakプロパティは、長い単語やテキストがコンテナの幅を超えたときに、どのように折り返されるかを制御するためのプロパティです。表示レイアウトの調整に便利です。

word-breakプロパティの値とその効果の一覧

• normal: 通常の単語区切りに従って折り返します。
• break-all: 長い単語でも途中で強制的に折り返し、コンテナの幅に収めます。
• keep-all: 日本語などは通常通りで、英単語は途中で折り返されません。

注意点や関連情報

word-breakは、単語がコンテナの幅を超える場合に効果的です。長い単語がある場合は、使用するプロパティによって表示が大きく変わることがあります。

word-breakが効かない時の原因と対策

テキストにスペースやハイフンが含まれていない

word-breakは、単語の途中で改行するかどうかを制御するプロパティですが、テキストにスペースやハイフンなどの区切り文字がない場合、改行されるタイミングがなく、word-breakの効果が発揮されないことがあります。

対策: word-breakが効かない場合、まずテキストに適切な区切り文字が含まれているか確認します。長い文字列や単語が続く場合は、word-break: break-all;を指定して、強制的に単語の途中で改行させることができます。

white-spaceが無効化している

white-spaceプロパティがnowrapやpreに設定されている場合、テキストの折り返しが無効化され、word-breakが効かないことがあります。white-space: nowrap;では、テキストが一行で表示され、改行が発生しません。

対策: white-spaceの設定を確認し、white-space: normal;やpre-wrap;を使用して、改行が発生するように設定します。これにより、word-breakによる単語の途中での改行が正しく適用されます。

共通するCSSコード

.css-sample-container {
    border: 1px solid #333;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
    

word-break: normal

通常の折り返し動作を行います。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-word-break-normal">
        Thisisaverylongwordthatdoesnotbreakandmaycausescrollingissuesifyourcontainerisnarrow.
    </div>
</div>
    

CSSコード

.css-sample-word-break-normal {
    width: 300px;
    word-break: normal;
    background-color: lightyellow;
}
    

word-break: break-all

単語の途中でも改行され、コンテナに収まらない場合に強制的に折り返されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-word-break-break-all">
        Thisisaverylongwordthatwillbreakattheendofeachlinebecauseweareusingword-break:break-all.
    </div>
</div>
    

CSSコード

.css-sample-word-break-break-all {
    width: 300px;
    word-break: break-all;
    background-color: lightpink;
}
    

word-break: keep-all

英単語が途中で折り返されず、単語単位で折り返されます。日本語には影響しません。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-word-break-keep-all">
        This is a test sentence that uses word-break: keep-all. 長いテキストの改行には特に影響しません。
    </div>
</div>
    

CSSコード

.css-sample-word-break-keep-all {
    width: 300px;
    word-break: keep-all;
    background-color: lightblue;
}
    

まとめ

• word-breakプロパティは、長い単語やテキストがコンテナの幅を超える場合に、その折り返し方法を制御します。
• normal: 通常の単語区切りに従って折り返し、単語の途中では改行されません。
• break-all: 長い単語があっても、途中で強制的に改行されます。
• keep-all: 日本語には影響せず、英単語が途中で折り返されることなく表示されます。