もくじ
Webサイトのコーディングをしていると、特定のテキストを一行で表示させたい場面があります。
例えば、ボタンやメニュー項目など、レイアウトが崩れると困る要素です。
この記事ではCSSでテキストを改行させない方法について解説します。
white-space プロパティでテキストを改行させない
CSSでは、white-spaceプロパティを使ってテキストの改行を制御できます。
テキストを改行させないためにはnowrapを使用します。
実装コード
HTML
Copy
<p class="no-wrap">このテキストは改行されません。</p>
CSS
Copy
.no-wrap {white-space: nowrap;}
【使用例1】長いテキストを1行で表示したい場合
長いテキストが要素からはみ出してしまう場合には、overflow: hidden;やtext-overflow: ellipsis;と組み合わせて使うことが一般的です。
以下のコードは、テキストが要素の幅を超えた場合「...」で切り捨てられます。
HTML
Copy
<div class="ellipsis">長いテキストがここにありますが、表示領域を超えると切り捨てられます。</div>
CSS
Copy
.ellipsis {width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
【使用例2】ボタンのテキストを改行させたくない場合
以下のコードは、ボタン内のテキストを一行で表示させ、テキストが改行されないようにする例です。
HTML
Copy
<button class="button">クリックしてください</button>
CSS
Copy
.button {white-space: nowrap;padding: 10px 20px;background-color: #f09896;color: #fff;border: none;border-radius: 5px;cursor: pointer;}
【使用例3】メニュー項目を1行で表示させたい場合
以下のコードは、テキストが要素の幅を超えた場合、横スクロールが表示されます。
HTML
Copy
<nav class="menu"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li></ul></nav>
CSS
Copy
.menu {padding: 10px;background-color: #f09896;overflow-x: auto; /* 横スクロールを可能にする */}.menu ul {list-style: none;padding: 0;margin: 0;display: flex; /* 横並びにする */}.menu li {flex: 0 0 auto; /* 各項目の幅を自動で調整 */}.menu a {display: block;padding: 5px 15px;color: #fff;text-decoration: none;white-space: nowrap; /* テキストを1行表示に */}
HTML・CSS入門におすすめの1冊
リンク
もみじ
Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。
実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。