CSSで文字の改行やはみだしを調整するプロパティの使い方

【 2025/05/10 17:07 更新】

CSSで文字の改行やはみだしの調整はどんなことができるの？

CSSには、文字の改行やはみだしの挙動を設定できるプロパティがたくさんあります。

white-space : 改行の有無・改行のタイミング・スペースの対応方法などを指定できる。
"display: inline-block;" : 幅に合わせて指定した文字ごとに改行可能。
overflow-wrap : はみ出してしまう長い英単語を途中で折り返す。
text-overflow : はみ出してしまう文字は"..."で省略。

CSSにはここで挙げるプロパティの他にも様々な設定方法があります。

本記事ではよく使うテクニックをいくつか紹介します！

改行/スペースの挙動を指定するwhite-spaceプロパティ

white-spaceプロパティは要素の改行有無・改行のタイミング・スペースの対応などが指定できます。

改行させたくないとき、改行/スペースを反映させたいときに便利！

【 test.css 】


.block {
    width: 200px;
    height: auto;
    background-color: beige;
}

.white-space-normal {
    white-space: normal;
}
.white-space-nowrap {
    white-space: nowrap;
}
.white-space-pre {
    white-space: pre;
}
.white-space-pre-wrap {
    white-space: pre-wrap;
}
.white-space-pre-line {
    white-space: pre-line;
}
.white-space-break-spaces {
    white-space: break-spaces;
}

【 HTMLファイル】


<div class="block white-space-normal">
    white-space: normal
    スペー   ス    
        
</div>
<br>
<div class="block white-space-nowrap">
    white-space: nowrap
    スペー   ス    
        
</div>
<br>
<div class="block white-space-pre">
    white-space: pre
    スペー   ス    
        
</div>
<br>
<div class="block white-space-pre-wrap">
    white-space: pre-wrap
    スペー   ス    
        
</div>
<br>
<div class="block white-space-pre-line">
    white-space: pre-line
    スペー   ス    
        
</div>
<br>
<div class="block white-space-break-spaces">
    white-space: break-spaces
    スペー   ス    
        
</div>

ブラウザで実行するとこんな感じです。

※実際は縦並びですが、横に並べております。

white-spaceが2つ目の"nowrap"だと文字が改行されず、それ以外の値は改行されましたが表示が異なります。

値それぞれの違いについては後述します。

例で使用したその他プロパティ解説

例で使用したプロパティについては以下の通りです。

height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。 "height: auto;"を設定すると要素の中身に合わせた高さとなります。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

white-spaceの値について説明

normal	デフォルトの設定です。連続したホワイトスペース(スペースや改行)を1つのスペース" "にまとめる。幅・英単語・その他設定に沿った自動改行も行われる。
nowrap	改行させない設定です。改行させない。連続したホワイトスペース(スペースや改行)を1つのスペース" "にまとめる。
pre	要素内の連続したホワイトスペース(スペースや改行)をそのまま反映させます。連続したホワイトスペース(スペースや改行)をそのまま反映させる。
pre-wrap	"normal"・"pre"の中間となる設定です。連続したホワイトスペース(スペースや改行)をそのまま反映させる。幅・英単語・その他設定に沿った自動改行も行われる。スペースは自動改行の対象外
pre-line	"normal"の特徴に加えて改行を反映させる設定です。連続したホワイトスペース(スペースや改行)を1つのスペース" "にまとめる。幅・英単語・その他設定に沿った自動改行も行われる。改行はそのまま反映される。
break-spaces	ほぼ"pre-wrap"の特徴となっており、違いはスペースは自動改行の対象となることです。連続したホワイトスペース(スペースや改行)をそのまま反映。幅・英単語・その他設定に沿った自動改行も行われる。スペースは自動改行の対象。

日本語対応！指定した文字ごとに改行できる"display: inline-block;"

指定した文字ごとに改行するためには"display: inline-block;"を使用します。

inline-blockを指定したタグで指定したい文字を囲むと、幅に合わせて指定の文字ごとに改行させることができます。

日本語文字はそのままだと中途半端な文字で自動改行されちゃうよね！

display: inline-block;

displayプロパティには要素の種類や表示を指定できます。
値"inline-block"を設定すると、width・height・margin・paddingなどblock要素用のプロパティが反映されるようになります。

【基本的な要素の種類】

block ブロック	箱のようなイメージ。要素の前後が強制的に改行される。
inline インライン	文章の一部分のイメージ。要素の前後は改行されない。
inline-block インラインブロック	blockだけど改行されないイメージ。要素の前後は改行されない。
flex フレックス	flex要素内にある複数の要素を1列に並べたり、並べ方をカスタマイズできるブロック要素。要素の前後が強制的に改行される。【詳しく知りたい方はこちら】 CSSのflexとは？Web画面必須なflexの基本的な使い方を詳しく解説！ \| こじはなNote

【 test.css 】


.inline-block {
    display: inline-block;
}

【 HTMLファイル】


<p>
    CSSで<span class="inline-block">キリの良い</span><span class="inline-block">文字で</span><span class="inline-block">改行する方法</span>
</p>

ブラウザで実行するとこんな感じです。

実際に横の幅を縮小させてみてください！

inline-blockを指定したspanタグによって囲まれた単語ごとに改行されます。

spanタグとは

文章の一部に装飾やギミックを加える時に使用します。
例えば、文章中の特定の文字を太字にする場合、spanタグがCSSと一緒に使われます。

はみ出す長い英単語を折り返すoverflow-wrapプロパティ

overflow-wrapプロパティははみ出してしまう長い英単語の折り返し指定ができます。

こじはなは意外と使ってる！
英単語が長すぎるとはみだしちゃうんだよね〜！

【 test.css 】


.block {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

.overflow-wrap-normal {
    overflow-wrap: normal;
}
.overflow-wrap-break {
    overflow-wrap: break-word;
}

【 HTMLファイル】


<div class="block overflow-wrap-normal">
    OverFlowWrapNormal
</div>
<br>
<div class="block overflow-wrap-break">
    OverFlowWrapBreakWord
</div>

ブラウザで実行するとこんな感じです。

overflow-wrapが"normal"だと文字がはみ出ましたが、"break-word"は折り返されました。

【 overflow-wrapの値について】

normal ：長い英単語は折り返さない。(デフォルト)
break-word：長い英単語は折り返す。

例で使用したその他プロパティ解説

例で使用したプロパティについては以下の通りです。

height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

はみ出す文字を"..."で省略するtext-overflowプロパティ

text-overflowプロパティははみ出してしまう文字を"..."で省略できます。

設定する際、合わせて"overflow: hidden;"・"white-space: nowrap;"も指定する必要があります。

1行のみ対応

はみ出した部分を非表示にする"overflow: hidden;"・改行をさせない"white-space: nowrap;"を指定する必要があるため、必ず1行となってしまいます。

【 test.css 】


.block {
    width: 100px;
    height: 100px;
    background-color: aqua;

    // 溢れたら隠す
    overflow: hidden;
    // 折り返さないように設定
    white-space: nowrap;
}

.text-overflow-clip {
    text-overflow: clip;
}
.text-overflow-ellipsis {
    text-overflow: ellipsis;
}

【 HTMLファイル】


<div class="block text-overflow-clip">
    text-overflow-clip
</div>
<br>
<div class="block text-overflow-ellipsis">
    text-overflow-ellipsis
</div>

ブラウザで実行するとこんな感じです。

text-overflowが"clip"だと文字が中途半端ですが、"ellipsis"は"..."で省略されました。

【 text-overflowの値について】

clip ：あふれた文字はそのまま。(デフォルト)
ellipsis：あふれた文字は"..."で省略。

例で使用したその他プロパティ解説

例で使用したプロパティについては以下の通りです。

overflow	親要素からあふれた要素の表示や挙動を指定できるプロパティです。 "overflow: hidden;"にすると、あふれた要素は隠れます。【その他の基本的な値】 visible：あふれた要素は親要素からはみ出て表示。(デフォルト) hidden：あふれた要素を非表示。 scroll：あふれた要素をスクロールして表示できる。
white-space	white-spaceプロパティは要素"の改行有無・改行のタイミング・スペースの対応などが指定できます。 "white-space: nowrap;"にすると改行されなくなります。【 white-spaceプロパティについて】（本記事）改行/スペースの挙動を指定するwhite-spaceプロパティ
height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

まとめ

white-spaceプロパティ：要素の改行有無・改行のタイミング・スペースの対応などが指定でき、値はnormal/nowrap/pre/pre-wrap/pre-line/break-spacesが用意されている。
"display: inline-block;"：inline-blockを指定したタグで指定したい文字を囲むと、幅に合わせて指定の文字ごとに改行させることができる。
overflow-wrap：はみ出してしまう長い英単語の折り返し指定ができ、値に"break-word"を設定すると英単語でもあふれる場合は途中で折り返される。
text-overflow：はみ出してしまう文字を"..."で省略でき、値に"ellipsis"を設定するとあふれる文字が"..."として表示される。

【 2025/05/10 17:07 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！