导致占位符错误包装的空格

Question

我正在创建一个打字训练器页面，用户可以在其中练习打字。请考虑以下事项：

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/

当用户输入时，如果字符正确，则字符变为蓝色;如果字符不正确，则字符变为红色。一切正常，只要文本不超过一行。请参阅以下内容：

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

问题是我正在用占位符替换占位符中的字符作为用户类型，以便它们看起来正在消失。一旦这相当于整行空格，文本就会错误地换行。是否有任何方法可以使它正确包裹？

感谢您的帮助。

Answer 1

您当前实施的问题是您需要插入不间断空格，在this post (javascript nonbreaking space)我发现'\xa0'是非破坏空间的原始字符。< / p>

将以下行（144和147）中的代码段从"\u2008"修改为"\xa0"后，它就像魅力一样。

修改

我在此代码段中发现了两个问题，第一个是"\u2008"无法正常工作 on 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只能使用第一个属性而忽略第二个属性（因为不支持），chrome会理解它们，但会忽略第一个并使用第二个（因为CSS的级联性质。）