「CSS」white-space プロパティの値pre-wrapの使い方

2021年9月15日

構文
pre-wrap
改行:そのまま
空白とタブ文字:そのまま
テキストの折り返し:折り返す
行末の空白:ぶら下げ
連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.cft {
border: 1px solid #000;
width: 150px;
height: 50px;
background: SkyBlue;
white-space: pre-wrap;
}
</style>
<p class="cft">test テスト123456</p>
<style> .cft { border: 1px solid #000; width: 150px; height: 50px; background: SkyBlue; white-space: pre-wrap; } </style> <p class="cft">test テスト123456</p>
<style>
  .cft {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: SkyBlue;
    white-space: pre-wrap;
  }
</style>
<p class="cft">test    テスト123456</p> 

 

CSS

Posted by arkgame