Incorrect wrapping spaces

Question

I create a page for entering instructions where the user can practice typing them. Consider the following:

HTML:

<div>
  <input type="button" value="Start!">
</div>
<div id="cd">
  <span id="time"></span> left!
</div>
<div data-placeholder="Some text goes here." id="ph">
    <div contenteditable="false" id="ed"></div>
</div>

https://jsfiddle.net/y7nwju6p/8/

As the user enters characters, the character turns blue if it is correct and red if it is incorrect. Everything works correctly if the text is not more than one line. See the following:

https://jsfiddle.net/nce4zqeu/30/

The problem is that I replace the characters in the placeholder with spaces as the user types so that they appear to disappear. As soon as it is equal to the whole line of spaces, the text will turn out incorrectly. Is there a way to make it so that it wraps correctly?

Thank you for your help.

Answer 1

, , ( javascript) '\xa0' char .

(144 147) "\u2008" "\xa0" .

, - , "\u2008" firefox ( ), "\xa0" ( chrome firefox).

, , , :

word-break: break-all; // this does the job in firefox
word-break: break-word; // this does the job in chrome

, firefox ( ), , ( CSS).