Webデザイン

【PR】を含みます。

【CSS】テキストを改行をさせない方法

CSS テキストを改行させない方法

Webサイトのコーディングをしていると、特定のテキストを一行で表示させたい場面があります。

例えば、ボタンやメニュー項目など、レイアウトが崩れると困る要素です。

この記事ではCSSでテキストを改行させない方法について解説します。

white-space プロパティでテキストを改行させない

CSSでは、white-spaceプロパティを使ってテキストの改行を制御できます。

テキストを改行させないためにはnowrapを使用します。

実装コード

HTML
Copy
  1. <p class="no-wrap">このテキストは改行されません。</p>
CSS
Copy
  1. .no-wrap {
  2.   white-space: nowrap;
  3. }

【使用例1】長いテキストを1行で表示したい場合

長いテキストが要素からはみ出してしまう場合には、overflow: hidden;やtext-overflow: ellipsis;と組み合わせて使うことが一般的です。

以下のコードは、テキストが要素の幅を超えた場合「...」で切り捨てられます。

HTML
Copy
  1. <div class="ellipsis">長いテキストがここにありますが、表示領域を超えると切り捨てられます。</div>
CSS
Copy
  1. .ellipsis {
  2.   width: 150px;
  3.   white-space: nowrap;
  4.   overflow: hidden;
  5.   text-overflow: ellipsis;
  6. }

【使用例2】ボタンのテキストを改行させたくない場合

以下のコードは、ボタン内のテキストを一行で表示させ、テキストが改行されないようにする例です。

HTML
Copy
  1. <button class="button">クリックしてください</button>
CSS
Copy
  1. .button {
  2.   white-space: nowrap;
  3.   padding: 10px 20px;
  4.   background-color: #f09896;
  5.   color: #fff;
  6.   border: none;
  7.   border-radius: 5px;
  8.   cursor: pointer;
  9. }

【使用例3】メニュー項目を1行で表示させたい場合

以下のコードは、テキストが要素の幅を超えた場合、横スクロールが表示されます。

HTML
Copy
  1. <nav class="menu">
  2.   <ul>
  3.     <li>
  4.       <a href="#">メニュー1</a>
  5.     </li>
  6.     <li>
  7.       <a href="#">メニュー2</a>
  8.     </li>
  9.     <li>
  10.       <a href="#">メニュー3</a>
  11.     </li>
  12.     <li>
  13.       <a href="#">メニュー4</a>
  14.     </li>
  15.   </ul>
  16. </nav>
CSS
Copy
  1. .menu {
  2.   padding: 10px;
  3.   background-color: #f09896;
  4.   overflow-x: auto; /* 横スクロールを可能にする */
  5. }
  7. .menu ul {
  8.   list-style: none;
  9.   padding: 0;
  10.   margin: 0;
  11.   display: flex; /* 横並びにする */
  12. }
  14. .menu li {
  15.   flex: 0 0 auto; /* 各項目の幅を自動で調整 */
  16. }
  18. .menu a {
  19.   display: block;
  20.   padding: 5px 15px;
  21.   color: #fff;
  22.   text-decoration: none;
  23.   white-space: nowrap; /* テキストを1行表示に */
  24. }

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-Webデザイン
-