Disable auto-trimming of text by <p> tag
html, javascript
Solution
Whitespace at the beginning and end of a paragraph isn't rendered. Also, sequences of whitespace within the paragraph are collapsed.
If you want all your whitespace to be rendered use non-breaking space entity` `. Note that this will affect line breaking and may induce horizontal scroll where lines would otherwise be wrapped.
You can replace all ordinary whitespace characters with non-breaking space like this:
var text = " Hell O ";
text.replace(/ /g, " ");
Alternatively, you can also use `<pre>...</pre>` tags.
Problem
I have some text in a var. `var text = " Hell O "` . 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). 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. This is my styling function btw. ``` 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" ; } } } ``` Any ideas ? Thanks