HTMLで絶対に改行させたくない！

 

https://tan-deki.com

HTMLで絶対に改行させたくない場合、一般的に<nobr>タグが使用されてたのが、<nobr>タグはHTML5で非推奨となり、代わりにCSSのwhite-spaceプロパティを使用することが推奨された

CSSのwhite-spaceプロパティで改行を禁止する

CSS

.no-break {
  white-space: nowrap;
}

上記のように、white-spaceプロパティにnowrapを指定することで、要素内のテキストが改行されなくなる

<nobr>タグについて

<nobr>タグは、Netscape Navigatorが独自に拡張したタグで、HTML5では非推奨となっているため、white-space: nowrap;を代替使用

具体的な使用例

HTML

<p class="no-break">これは改行されません。</p>

その他の注意点

• ブラウザの互換性: white-space: nowrap;は、ほとんどのモダンブラウザでサポートされているも、古いブラウザでは動作しない可能性あり
• レイアウトの崩れ: nowrapを指定した場合、要素の幅を超えてテキストが表示される可能性あり、この場合、overflowプロパティなどを併用して、はみ出した部分の処理を行う必要がある
• アクセシビリティ: 視覚障がいを持つユーザーにとっては、改行がないことで内容が理解しにくくなる可能性あり、<span>タグなどで区切りを入れるなど、適切な対策を検討すべし