white-space demonstration

by Richard Hunter

HTML

<h2>normal</h2>
<div class="container">
  It's
  the     end of the    world as we know it and I feel fine.
</div>

<h2>pre</h2>
<div class="container pre">
  It's
  the     end of the    world as we know it and I feel fine.
</div>

<h2>nowrap</h2>
<div class="container nowrap">
  It's
  the     end of the    world as we know it and I feel fine.
</div>

<h2>pre-wrap</h2>
<div class="container pre-wrap">
  It's
  the     end of the    world as we know it and I feel fine.
</div>

<h2>pre-line</h2>
<div class="container pre-line">
  It's
  the     end of the    world as we know it and I feel fine.
</div>

CSS

.container {
  margin: auto;
  width: 200px;
  background: yellow;
  border: solid 1px black;
  padding: 10px;
  white-space: normal;
}

.pre { white-space: pre }
.nowrap { white-space: nowrap }
.pre-wrap { white-space: pre-wrap }
.pre-line { white-space: pre-line }