【问题标题】：spaces causing placeholder to wrap incorrectly导致占位符错误换行的空格
【发布时间】：2018-04-16 17:40:52
【问题描述】：

我正在创建一个打字培训师页面，用户可以在其中练习打字。考虑以下几点：

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/

问题在于，当用户键入时，我将占位符中的字符替换为空格，这样看起来它们正在消失。一旦这相当于一整行空格，文本就会错误地换行。有什么方法可以让它正确包装吗？

感谢您的帮助。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

在以下行（144 和 147）中将您的 sn-p 从 "\u2008" 修改为 "\xa0" 后，它就像一个魅力。

编辑

我在这段代码 sn-p 中发现了两个问题，第一个是 "\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 的级联性质）。

【讨论】：

您是否尝试输入直到到达文本的第二行？那是它停止工作的时候。我最初尝试了\xa0，但没有成功。我尝试了一些不同的空间，看看它是否会有所作为，这就是为什么它是\u2008。
\xa0 或 \u2008 具有完全相同的功能。无论哪种方式，当您键入第二行时，占位符文本都不会正确换行。
您是否尝试将word-break: break-all 添加到#placeholder？
我的解决方案是在#placeholder 中插入：word-break: break-all; word-break: break-word;，请尝试一下，如果可行，我将更新我的答案并解释它为什么有效。
它确实工作得更好。但是在某些情况下它不会。如果你玩弄盒子的宽度并尝试几次，你就会看到。破口大骂也不是最好的解决办法。