JSFiddle - React, Tailwind, and code Playground

by camel2243

HTML

<h3>white-sapce: normal;</h3>
<div class="white-space--normal">
12345abcde  12345abcde<br />
12345abcde 12345abcde
12345abcde
</div>
<hr />
<h3>white-space: nowrap;</h3>
<div class="white-space--nowrap">
12345abcde  12345abcde<br />
12345abcde 12345abcde
12345abcde
</div>
<hr />
<h3>white-space: pre;</h3>
<div class="white-space--pre">
12345abcde  12345abcde<br />
12345abcde 12345abcde
12345abcde
</div>
<hr />
<h3>white-space: pre-wrap;</h3>
<div class="white-space--pre-wrap">
12345abcde  12345abcde<br />
12345abcde 12345abcde
12345abcde
</div>
<hr />
<h3>white-space: pre-line;</h3>
<div class="white-space--pre-line">
12345abcde  12345abcde<br />
12345abcde 12345abcde
12345abcde
</div>

CSS

div{
  width: 200px;
  background-color: rgba( 100, 100, 100, 0.3);
  word-wrap: break-word; 
}

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

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

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

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

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