title: Disable auto-trimming of text by <p> tag
body: <p>I have some text in a var. <code>var text = " Hell O "</code> . each character of the text is wrapped in span tag , given an id and then appended to innerhtml of a p tag. Then with a function  each span is styled (on an event). </p>
  
  <p>Problem is that any spaces at the beginning or end of the p tag are not getting highlighted. I am not sure whether the p tag is ignoring the spaces and not including them in the final para . But it does seem that the first/last spaces are not being included. </p>
  
  <p>This is my styling function btw.</p>
  
  <pre><code>function highlightLetter(typedletter) {
          var targetId = "h"+( typedletter );
          makeGreen = document.getElementById(targetId) ;
          if (makeGreen) {
              console.log(makeGreen.innerText.charCodeAt(0)) ;
              if (makeGreen.innerText.indexOf(String.fromCharCode(10)) == -1 ) {
                  makeGreen.style.background  = "lightgreen" ;
              }
  
          }
      }
  </code></pre>
  
  <p>Any ideas ?</p>
  
  <p>Thanks</p>