javascript - 导致占位符错误换行的空格

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' 是不间断空格的原始字符。

在将以下行(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 就可以只使用第一个而忽略第二个(因为不支持)，而 chrome 会理解这两个但会忽略第一个而使用第二个(因为CSS 的级联特性)。