JSFiddle - React, Tailwind, and code Playground

Testing peformatted text and different spacing widths with monospaced fonts.

by nilloc

HTML

<pre>
this is some test text
this&nbsp;is&nbsp;some&nbsp;test&nbsp;text
this&thinsp;is&thinsp;some&thinsp;test&thinsp;text
this&ensp;is&ensp;some&ensp;test&ensp;text
this&emsp;is&emsp;some&emsp;test&emsp;text
</pre>

<div class="code">
<span class="pre">this</span><sp></sp><span class="pre">is</span><sp></sp><span class="pre">some</span><sp></sp><span class="pre">test</span><sp></sp><span class="pre">text</span>
<div class="height-test">
</div>
</div>

this is some test text<br>
this is some test text<br>
this is some test text<br>
this is some test text<br>
this is some test text<br>

CSS

pre{
  /* visible:hidden; */
  /* color:transparent; */
}

.code{
  margin:1em 0;
  background:rgba(255, 180, 0, 0.4);
  position:relative;
}

.height-test{
  background:rgba(255, 180, 0, 0.4);
  width:0.6em;
  height:1.15em; /* messy :\ */
  position:absolute;
  top:0;
  right:50%;
}

.pre{
  font-family: monospace;
}
sp{
  display:inline-block;
  font-family: monospace;
  width:0.6em;
  content:'&ensp;';
  whitespace: pre;
}

JavaScript

/*this is some test text*/