html･CSSで改行させない方法７選【徹底解説】

こんにちは。テイクです。ホームページを作り続けて9年になります。

表を作っていて文字を改行させたくないのに勝手に改行される。

あるいはhtmlタグのbrを消したい。

またあるいは単語内を改行させたくない。

htmlやCSSで文字やdivを改行させない、折り返しさせない方法を7パターン紹介します。

div,span,table,tdなどにおいて使えます。

1.table,tdなど自動改行させない方法

white-space: nowrapを指定します。

tableのtdが改行されている例

下記のように表を使ってカレンダーを作りたいとします。

表は内容量に応じて自動で横幅が決まります。これによりどの列も改行されてしまいます。

2020年01月01日	水曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2020年01月02日	木曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2020年01月03日	金曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

html

<table border="1">
    <tbody>
        <tr>
            <td>2020年01月01日</td>
            <td>水曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
            <td>2020年01月02日</td>
            <td>木曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
            <td>2020年01月03日</td>
            <td>金曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
    </tbody>
</table>

ここで1列目2列目の日時と曜日を改行させたくないとします。

CSS「white-space: nowrap」で改行させない

white-space: nowrapはその要素内を改行させないCSSです。

CSSの「white-space: nowrap」はtdだけでなくdivでもspanでもなんにでも使うことができます。

改行させない指定をするときはその要素が画面から飛び出ていないか注意して確認しましょう。

2020年01月01日	水曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2020年01月02日	木曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2020年01月03日	金曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

html

<table border="1" class="nowrap">
    <tbody>
        <tr>
            <td>2020年01月01日</td>
            <td>水曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
            <td>2020年01月02日</td>
            <td>木曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
            <td>2020年01月03日</td>
            <td>金曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
    </tbody>
</table>

CSS

.nowrap td:nth-child(1),.nowrap td:nth-child(2){
    white-space: nowrap;
}

CSSにて1つ目のtdと2つ目のtdにwhite-space: nowrapを指定し改行させないようにしています。

注意点として画面の横幅が狭いスマホでは横幅がはみ出たり、3列目が改行されすぎて読みづらいことがあります。

そこでスマホでは3列目を改行させましょう。

スマホ対応例

2020年01月01日	水曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2020年01月02日	木曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2020年01月03日	金曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

html

<table class="nowrap2">
    <tbody>
        <tr>
            <td>2020年01月01日</td>
            <td>水曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
            <td>2020年01月02日</td>
            <td>木曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
            <td>2020年01月03日</td>
            <td>金曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
    </tbody>
</table>

CSS

.nowrap2,.nowrap2 tbody,.nowrap2 tr,.nowrap2 td{
    display: block;
}
.nowrap2 tr{
    border-bottom: 1px solid #999;
    padding: 10px;
}
.nowrap2 td:nth-child(1),.nowrap2 td:nth-child(2){
    display: inline-block;
}

まずtable以下全部をdisplay:blockにします。
1列目と2列目、つまり1つ目と2つ目のtdを display:inline-blockにして1行にしています。（内容量によっては1行になりません。）

html「nowrap」を使って改行させない

td、th限定ですが、html属性のnowrapを指定することでCSSを使わなくても改行させないようにできます。

2020年01月01日	水曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2020年01月02日	木曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2020年01月03日	金曜日	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<table border="1">
    <tbody>
        <tr>
            <td nowrap>2020年01月01日</td>
            <td nowrap>水曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
            <td>2020年01月02日</td>
            <td>木曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
            <td>2020年01月03日</td>
            <td>金曜日</td>
            <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
    </tbody>
</table>

tdまたはthに「nowrap」または「nowrap="nowrap"」を指定します。CSSは不要です。

これで改行されなくなります。

「nowrap」は列の一番長いところにだけ指定するだけで大丈夫です。もちろん列すべてのtdに指定してもOKです。

2.折り返さないで はみ出た部分を省略する方法

折り返さない方法を説明しましたが、上記の場合ブラウザ幅やtdの幅によってはテキストがはみ出してしまいます。

はみ出た部分を省略する方法があります。

例

<style>
.shoryaku{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #999;
    padding: 10px;
}
</style>

<div class="shoryaku">折り返さないではみ出た部分を省略する方法折り返さないではみ出た部分を省略する方法折り返さないではみ出た部分を省略する方法</div>

「text-overflow: ellipsis」は要素がはみ出したときに「…」を付けてくれるCSSです。

ただしこれだけでは効かず、改行させない「white-space: nowrap」と、はみ出した要素を隠す「overflow: hidden」をセットで使う必要があります。

3.brで改行させない方法

<br>を「display:none」で消します。

パソコン版では<br>で改行していたが、スマホ版では改行させない。

そんなときに使える方法です。

@media(max-width:750px){
br{display:none}
}

これだけです。

4.spanで単語内を改行させない方法

こちらの方法は単語など任意の範囲内を改行させない方法です。逆に言えば任意の範囲レベルで改行させたい場合の方法です。

レスポンシブ対応しているサイトで特に使いたい方法です。

改行させたくない範囲をdisplay:inline-blockを指定したspanで囲いましょう。

例

<style>
span{
display:inline-block;
}
</style>
<p><span>オツベルときたら大したもんだ。</span><span>稲扱器械の六台も据えつけて、</span><span>のんのんのんのんのんのんと、</span><span>大そろしない音をたててやっている。</span></p>

下の文章は実装例です。
ブラウザ幅を狭めてみてください。改行される箇所が変わりますね。

注意点として「display:inline-block」を指定した範囲が大きかったりして横幅以上に文字があるとその範囲内で改行されます。

display:inline-blockについてはこちら↓

5.divを改行させない方法

divにdisplay:inline-blockを指定します。

下記のようにブロック要素（div）が並んでいるとします。

<div>1行目</div>
<div>2行目</div>
<div>3行目</div>

ブロック要素はその横幅に関わらず前後の要素を横に並べない、つまり改行させる特色があります。

これを横に並べるつまり改行させないようにするにはブロック要素をインライン要素またはインラインブロックに変更します。

<div>1行目</div>
<div>2行目</div>
<div>3行目</div>
<style>
display:inline-block;
</style>

上記はdivにdisplay:inline-block;を指定した例です。これで改行せずに横並びにできました。

ブロック要素、インライン要素についてはこちら↓

その他divを改行させない、つまり横並びにさせる方法はこちら↓

6.display:flexを改行させない方法

「flex-wrap: nowrap」を指定します。

なお「flex-wrap: nowrap」は初期値であるため普通は指定不要です。

「flex-wrap: wrap」が指定されていて、上書きするときに使いましょう。

<style>
.yokonarabi{
    /*コレ*/flex-wrap: nowrap;
    display:flex;
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 10px;
}
</style>

<div class="yokonarabi">
    <div>
        <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
    </div>
    <div>
        <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="">
    </div>
</div>

7.文字を調整する

これはCSSというよりデザイン的な話ですが、上記の方法で無理やり改行させなかったとしてもデザイン上崩れては元も子もありません。

当たり前の方法にはなってしまいますが、文字数を少なくし範囲に収まるようにする、文字を小さくする、範囲を広げる、文字間隔を詰めるといったことをすることで改行しなくても収まるようにしましょう。

文字数を少なくする

「お問い合わせ」→「問合せ」のようなことはよくやります。

記号を半角にするということも有効です。
半角にするには文字変換時にF8を押します。

文字を小さくする

CSSのfont-sizeを使います。

一部だけ小さいと違和感があるのでまとまりすべて同じ大きさにすることをおすすめします。

文字範囲を広げる

CSSのwidthを使います。

違和感のないように調整しましょう。

文字隙間を詰める

CSSのletter-spacingを使います。マイナスの値も指定可能です。

文字が重なると読みづらくなり本末転倒ですので、目視で確認しながら調整しましょう。

【まとめ】CSSを使って改行させないで1行で納める方法

1. 自動改行させない方法
   要素にwhite-space: nowrap
2. 折り返さないで はみ出た部分を省略する方法
   要素にtext-overflow: ellipsis
3. brで改行させない方法
   brにdisplay:none
4. spanの範囲内を改行させない方法
   spanにdisplay:inline-block
5. divを改行させない方法
   divにdisplay:inline-block
6. display:flexを改行させない方法
   display:flexを指定している要素にflex-wrap: nowrap
7. 文字を調整する
   文字数を少なくする･文字を小さくする･範囲を広げる･文字間を詰める

以上、htmlにおけるCSSを使って改行させない方法でした。