White space and Whitespace

dabblet.css

/*
	White space and Whitespace
*/

div {
  margin: 0 0 10px 0;
  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;
}

dabblet.html

<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.
</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>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("#changer").change(function() {
  $("div").css({
  	"white-space": $("#changer option:selected").val()
  });
});
</script>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"html"}