<h1>normal</h1>
<div class="wrap">
  <div class="normal">あああ  あああ     あああ
ああ     ああ
ああ</div>
</div>

<h1>nowrap</h1>
<div class="wrap">
  <div class="nowrap">あああ  あああ     あああ
ああ     ああ
ああ</div>
</div>

<h1>pre</h1>
<div class="wrap">
  <div class="pre">あああ  あああ     あああ
ああ     ああ
ああ</div>
</div>

<h1>pre-wrap</h1>
<div class="wrap">
  <div class="pre-wrap">あああ  あああ     あああ
ああ     ああ
ああ</div>
</div>

<h1>pre-line</h1>
<div class="wrap">
  <div class="pre-line">あああ  あああ     あああ
ああ     ああ
ああ</div>
</div>

.wrap {
  width: 100px;
  background-color: #eee;
}

.normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}

.pre-line {
  white-space: pre-line;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.