mojigumi 本文やHタグなどの見出しで改行したくない文字、折り返ししたくない場所ってありますよね。特に現代のようなワンソースマルチユースなデータ作成の時代、レスポンシブデザインが広く普及されている今日、わざわざ端末の種類別にHTMLやCSSを作るなんて途方のない作業を生みメンテナンス性が落ちるだけ。そんな背景を知らないお客様にいかに納得していただくかも頭の痛いところです。
そこでHTML+CSSを使って、一番シンプルな折り返しを制御する方法を作ってみました。
タグがうまく機能しない時
改行を制御するなら本来<nobr>を使って
<nobr>改行したくない文章<wbr>ここから改行したい文章</nobr>
と使うのが一般的ですが、時にこれが原因不明で機能しない時があって、困った時にCSSで強制的に設定してしまいたい時の方法です。具体的に言うと、原因不明ではなく、nobrはIEとネスケの独自仕様で、モダンブラウザでは有効ではないことが不具合の理由。つまり、現在ではつかってはいけないタグになっている。
本文やHタグの見出しでも使えます
ウンチクはさておき、下記コードをコピペすれば完了です
まずHTMLで書くとこう
折り返したくない文字を…で囲んでください。
<h2><span class="nobr">折り返さない</span><span class="nobr">折り返さない</span></h2>
あるいは
<h2><span class="nobr">折り返さない<wbr>美しい文字組み <span></span></span></h2>
CSS（class=”nobr”）はこうなります
ついでにnobr（IE、NNの独自タグ）にも同指定しちゃってます。
/* 改行禁止、折り返し禁止 */
nobr,
.nobr{
white-space: nowrap;
font-family:inherit;
font-size:inherit;
display: inline-block;
}
「inherit」をつけないと親のフォントの属性を引き継がないのでそうしてます。
HTML標準ではnobrタグはHTML標準たぐではないそうなので、将来的にはclassを使った方がよさそうです。でもnobrのがうまく機能する場合があって、ケースバイケースとして使用し続けるとしています。
以上です。簡単ですね！
このspanコードで挟んであげれば、その文字は、無理くり端末横幅を小さくしない限り改行されません。