「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>

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

CSS

Posted by arkgame

関連記事: