title: Why does adding spans change letter position or width in Chrome?
body: <p>I've ran into an interesting issue, that I believe might be related to Chrome, or even the font I've been using.</p>
  
  <p>In certain parts of this app, spans are wrapped around each letter, after a bit of time. Once this happens, there's a slight shift of letter position. I'm not sure if this is the width, margin, or something else. But, it's most noticeable around the letter "W" and "A".</p>
  
  <p>In the example, you'll see the issue after 1 second, when the letters are wrapped in a span.</p>
  
  <p><a href="https://jsfiddle.net/7ky8Ldpa/7/" rel="nofollow noreferrer">Link to JS Fiddle</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setTimeout(function() {
    var wrapFinal = $(".wrap");
    wrapFinal.html(wrapFinal.text().replace(/./g, "&lt;span&gt;$&amp;&lt;/span&gt;"));
  }, 1000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 46px;
    text-align: center;
    letter-spacing: 4px;
    white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrap"&gt;aWsdasWdWds&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>