<div class="container">
  <div class="box w-normal">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, iste ab! Ut omnis voluptas nostrum ratione, id ab excepturi non.
</div>
<div class="box w-nowrap">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores sequi nemo neque explicabo nam dolorum consectetur accusamus illum quasi fugit!
</div>
<div class="box w-pre">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum explicabo facilis earum repudiandae mollitia neque non veritatis laboriosam quo cupiditate.
</div>
<div class="box w-prewrap">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt reiciendis cupiditate dignissimos ipsam voluptates doloribus? Placeat error rem quo iusto.
</div>
<div class="box w-preline">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste corrupti, odit repudiandae dolor magnam pariatur illo reiciendis tempora maiores nisi.
</div>
</div>
.box {
  width: 200px;
  height: 200px;
  background: pink;
  padding: 5px;
  margin-bottom: 10px;
}

.w-normal {
  white-space: normal;
}

.w-nowrap {
  white-space: nowrap;
}

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

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

.w-preline {
  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.