title: White-space:pre-wrap not aligned on first line
body: <p>I have the following html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;html&gt;
   &lt;head&gt;
   &lt;style&gt; 
    p.test {
     width: 11em; 
     border: 1px solid #000000;
     word-wrap: break-word;
     white-space: pre-wrap;
   }
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;p class="test"&gt; This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.   The long word will break and wrap to the next line.&lt;/p&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>
  When the page is displayed, the first line of the text shift by one letter.
  <a href="https://i.stack.imgur.com/lsnWG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lsnWG.png" alt="enter image description here"></a></p>
  
  <p>If I change to "white-space:pre-line", the display will not show white space.  How to make the first line aligned with the rest of the text?</p>