「CSS」nowrapでブロックレベル要素が改行されない

2022年6月20日

環境
Google Chrome　102.0.5005.115

構文
white-space は CSS のプロパティで、要素内のホワイトスペースをどのように扱うかを設定します。
nowrap
normal と同じくホワイトスペースを詰めますが、行の折り返しは行いません。
空白がまとまる。改行されない。
white-space: nowrapは、ブロックレベル要素であるpタグやdivタグで改行されません。

使用例

<!DOCTYPE html>

<html>

<head>

<style>

.cft {

border: 2px solid #000;

width: 180px;

height: 45px;

background: skyblue;

white-space: nowrap;

}

</style>

</head>

<body>

<div class="cft">white-space はtest studyィ</div>

<p class="cft">white-space はあいうえおじょうほｐう</p>

</body>

</html>

<!DOCTYPE html> <html> <head> <style> .cft { border: 2px solid #000; width: 180px; height: 45px; background: skyblue; white-space: nowrap; } </style> </head> <body> <div class="cft">white-space はtest studyィ</div> <p class="cft">white-space はあいうえおじょうほｐう</p> </body> </html>

<!DOCTYPE html>
<html>
<head>
<style>
  .cft {
    border: 2px solid #000;
    width: 180px;
    height: 45px;
    background: skyblue;
    white-space: nowrap;
  }
</style>
</head>
<body>
<div class="cft">white-space はtest studyィ</div>
<p class="cft">white-space は あいうえおじょうほｐう</p>
</body>
</html>

実行結果
pタグ、divタグ要素の文字が改行されません

CSS

Posted by arkgame

関連投稿: