CSS WEB制作

文字を折り返しさせない white-space: nowrap; 

text

テキストの折り返しをさせたくない場合はどのようなCSSを設定すればいいでしょうか。

今回はその方法をご紹介します。

 

私の場合は、レスポンシブデザインの確認でブラウザを伸縮させていたら、ボタンの中のテキストが折り返してしまったので、「あれ?」と感じたことでした。

 

解決コード

セレクタ {
white-space: nowrap;
}

これで、要素の幅が縮まっても、テキストの折り返しはしなくなります

 

レスポンシブ関連の記事も紹介しておきます。

from-2column-to- 1column
【flex】レスポンシブデザインで要素の並び順や幅の指定を自由自在に

続きを見る

-CSS, WEB制作
-

© 2024 人生フリーハンド Powered by AFFINGER5