JSFiddle - React, Tailwind, and code Playground

by Anam Ansari

HTML

<div id="page-wrap">
	
		<label>whitespace</label>
		<select id="changer">
			<option value="normal">normal</option>
			<option value="nowrap">nowrap</option>
			<option value="pre">pre</option>
			<option value="pre-wrap">pre-wrap</option>
			<option value="pre-line">pre-line</option>
		</select>
		
		<h2>Actual spaces</h2>
		<div class="spaces">
		   A bunch of words you see.hellooooooooooooooooooooooooooooooooooooooooooooooooooooo hi howwwwwwwwwwwwwwwwwwwwwwwwwww
		</div>
		<h2>Thin spaces &amp;thinsp;</h2>
		<div class="thin-spaces">
		   A&thinsp;bunch&thinsp;of&thinsp;words&thinsp;you&thinsp;see.
		</div>
		<h2>Non breaking spaces &amp;nbsp;</h2>
		<div class="non-breaking-spaces">
		   A&nbsp;bunch&nbsp;of&nbsp;words&nbsp;you&nbsp;see.
		</div>
		<h2>En spaces &amp;ensp;</h2>
		<div class="en-spaces">
		   A&ensp;bunch&ensp;of&ensp;words&ensp;you&ensp;see.
		</div>
		<h2>Em spaces &amp;emsp;</h2>
		<div class="em-spaces">
		   A&emsp;bunch&emsp;of&emsp;words&emsp;you&emsp;see.
		</div>
		<h2>Zero width joiner &amp;zwj;</h2>
		<div class="zero-width-joiner">
		   A&zwj;bunch&zwj;of&zwj;words&zwj;you&zwj;see.
		</div>
		<h2>Zero width non joiner &amp;zwnj;</h2>
		<div class="zero-width-non-joiner">
		   A&zwnj;bunch&zwnj;of&zwnj;words&zwnj;you&zwnj;see.
		</div>
		
	</div>

CSS

* { margin: 0; padding: 0; }
	#page-wrap { width: 960px; margin: 80px auto; }
	
	#page-wrap > div {
	  margin: 50px;
	  border: 1px solid red;
	  width: 100px;
	}
	
	body {
	  background: black;
	  padding: 40px 20px;
	  color: white;
	}
	h2 {
	  font-size: 12px;
	  margin: 10px 0 0 0;
	  color: red;
	  display: none;
	}

JavaScript

$("#changer").change(function() {
            alert('called');
		  $("#page-wrap > div").css({
		  	"white-space": $("#changer option:selected").val()
		  });
		});