Hタグや本文の改行禁止、折り返し禁止をHTMLとCSSで制御したい時

久々の仕事ネタです。
本文Hタグなどの見出し改行したくない文字折り返ししたくない場所ってありますよね。特に現代のようなワンソースマルチユースなデータ作成の時代、レスポンシブデザインが広く普及されている今日、わざわざ端末の種類別にHTMLやCSSを作るなんて途方のない作業を生みメンテナンス性が落ちるだけ。そんな背景を知らないお客様にいかに納得していただくかも頭の痛いところです。
そこでHTML+CSSを使って、一番シンプルな折り返しを制御する方法を作ってみました。

<nobr>タグがうまく機能しない時

改行を制御するなら本来<nobr>を使って

<nobr>改行したくない文章<wbr>ここから改行したい文章</nobr>

と使うのが一般的ですが、時にこれが原因不明で機能しない時があって、困った時にCSSで強制的に設定してしまいたい時の方法です。

本文やHタグの見出しでも使えます

ウンチクはさておき、下記コードをコピペすれば完了です

まずHTMLで書くとこう

折り返したくない文字を<span class=”nobr”>…</span>で囲んでください。


<h2><span class="nobr">折り返さない</span><span class="nobr">美しい文字組み</span></h2>

CSS(class=”nobr”)はこうなります

/* 改行禁止、折り返し禁止 */
span.nobr{
display: inline-block;
font-size:inherit;
}

以上です。簡単ですね!
このspanコードで挟んであげれば、その文字は、無理くり端末横幅を小さくしない限り改行されません。

この記事を書いた人

mojigumi

mojigumiの代表、コウです。
主に広告デザインを中心に、企画・出版・編集・印刷、Web制作をしています。