CSSで改行させる・改行させないを指定する方法

レスポンシブサイトで、文字を指定の位置で改行させる為に<br>で改行すると、PCでは問題無くても、スマホの表示では不自然な改行になり、困ったことはないでしょうか？レスポンシブサイトで文字を改行させたり、改行させないを指定する方法は、通常の改行に比べて少し手間がかかりますが、今回はCSSを使って改行の指定をする方法を３つご紹介します。改行の指定方法に応じて使い分けてください。

word-breakで単語の途中で改行させない
inline-blockで改行したくない文字を指定
media queriesでデバイスに応じて細かい指定

word-breakで単語の途中で改行させない

文字を単語の途中で改行させたくない場合は、CSSのword-break:keep-allが有効です。

//css
is-wbka{
word-break:keep-all;
}

//html
<h3 class="is-wbka">ミツバチが花の蜜を採集し、巣の中で加工、貯蔵したものが蜂蜜です。</h3>

これをPCで表示すると、

スマホ表示ではこのようになります。

word-breakの注意点

word-break:keep-allを使うと、単語の途中で改行しなくなりますが、下記のサイトで詳しい記載を見ると、

https://developer.mozilla.org/ja/docs/Web/CSS/word-break

CJK (中国語、台湾語、日本語、韓国語) テキストの改行を許可しません。 CJK以外のテキストについては normal と同じ挙動となります。

つまりword-break:keep-allはCJK以外のテキストには反映されません。英語の表記はもちろんですが、「-（ハイフン）」「/（スラッシュ）」などの直後で改行されることがあるので、注意しましょう。

例えば、下記のような型番の場合は途中で改行されてしまいます。

<h3 class="is-wbka">I-O DATA HDMI-SDカード/HDD保存 GV-HDREC </h3>

スマホ表示にすると、

word-break:keep-allを文中に使うと、指定のためのタグを入れる必要はなく、単語の途中で改行させないようにできますが、CJK以外の英語や「-」「/」には適用されないので、完全には制御出来ません。

inline-blockで改行したくない文字を指定

CSSのdisplay: inline-block;はinline要素のような表示ですが、要素の中身はblockで高さ・横幅などを指定できます。

使い方としては、改行したくない文字を<span>で囲むことで、改行が入らず、文字を横に並べることができます。

//css
h3 > span {
 display: inline-block;
}

//html
 <h3 class="title"><span>ミツバチが花の蜜を採集し、</span><span>巣の中で加工、</span><span>貯蔵したものが蜂蜜です。</span></h3>

スマホ表示にすると、

media queriesでデバイスに応じて細かい指定

CSSのmedia queries(メディアクエリ)を使った改行指定を行うと、デバイスサイズに応じて細かい指定ができます。例えば、PCでは改行させないで、モバイルの時に改行する位置を指定する。逆にPCでは改行して、モバイルの時に改行させないといったことが出来ます。

(1)PCでは改行させないで、モバイルの時に改行する位置を指定します。

//css

.sp_br {
   display: none;
}
@media screen and (max-width: 480px){
    .sp_br {
       display: block;/ *blockでもinlineでも可 */
    }
}

// html 

<h3 class="title">ミツバチが花の蜜を採集し、<br class="sp_br">巣の中で加工、貯蔵したものが蜂蜜です。</h3>

これをPCで表示すると、

スマホ表示にすると、指定したところで改行させることができます。

(2)PCでは改行して、モバイルの時に改行させない場合。

//css

.pc_br {
   display: block
}
@media screen and (max-width: 480px){
    .pc_br {
       display: none;
    }
}

// html 

<h3 class="title">ミツバチが花の蜜を採集し、<br class="pc_br">巣の中で加工、貯蔵したものが蜂蜜です。</h3>

PC表示で指定の位置で改行されます。

スマホ表示にすると、改行の指定が適用されません

最後に

レスポンシブデザインでは、どのデバイスでもそれなりに最適に表示することを目指すものなので、改行を指定しないものですが、クライアントの要望でどうしても文字を改行したくないと言われた場合に、上記の方法をおすすめします。

前の記事次の記事