Written by Kasumi

CSSのwhite-space nowrapを子要素だけ解除する方法

cssで横スクロールを実装するのにwhite-space nowrapを使っている。

横スクロールの子要素にテキストがあり、こちらも改行されず表示されてしまう。

子要素は改行されるようにwhite-space nowrapを解除したい。

本記事ではこのような悩みを解決します。

white-space nowrapを指定

white-space: normal;

子要素に同じくwhite-spaceプロパティを付与

値にnormalを指定します。

以上で横スクロールの親要素に指定してある、white-space nowrapは活かしたまま、子要素のみ改行できるように解除されます。

まとめ

CSSのwhite-space nowrapを子要素だけ解除する方法について紹介しました。

以上で解説を終わります。

関連記事

HTMLCSS プログラミング

form(フォーム)タグでエンターキー送信を無効にする方法

2021.12.21
659
HTMLCSS プログラミング

CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法

更新日:2020.06.11
198
HTMLCSS プログラミング

【簡単CSS】flexboxで孫要素の高さを揃えて均等に子要素を横並び配置する方法

2022.03.06
2069
HTMLCSS

【CSS3】アニメショーンプロパティを使いこなそう!

更新日:2019.11.28
241