LoginSignup
5
1

More than 5 years have passed since last update.

特定の単語だけ途中で改行させないHTML/CSS(「あなたとJAVA, 今すぐダウンロー(改行)ド」問題)

Posted at

トップページに掲載されるキャッチフレーズなど、言葉の途中で改行されると急激にダサくなってしまう文があると思います。
英語を始めとするスペースで単語が区切られる言語であればブラウザが良い感じに調整してくれるのですが、日本語を含むCJKVのような言語では単語の途中であっても無慈悲に改行されてしまいます。

要するにこれを避けたい

途中で改行されるものとして最も有名なのがこれです。
image.png
https://java.com/ja/ より)

この「今すぐダウンロー(改行)ド」は何の変哲もないHTMLで再現できます。

HTML
<div>
  <h1>あなたとJAVA, 今すぐダウンロード</h1>
</div>

image.png

image.png

ビューポートの幅によっては途中で文章が折り返されます。当然ながら単語や意味の区切りは無視されます。

ビューポートの幅どころの問題ではないjava.comのサイトは間抜けすぎるにしても、レスポンシブ対応をしていたらモバイルだと変になった……という事案は普通にあるのではないでしょうか。

解決策:inline-blockを使う

display:inline-block を適用したクラスを作ってあげて、絶対に改行させたくない単語だけspanで囲ってあげると「一塊」になるため、良い感じになります。

CSS
.nobreak{
  display:inline-block;
}
HTML
<div>
  <h1>あなたとJAVA, <span class="nobreak">今すぐ</span><span class="nobreak">ダウンロード</span></h1>
</div>

image.png

image.png

もちろんどんな幅でもOKというわけではなく、ビューポート幅がそのspan内の文字列による幅未満になるとやむを得ず改行されてしまいます。(そもそも、こういう状況ではfont-sizeを見直すべきでしょう。)

image.png

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1