空格和不具有相同的宽度？答案

【问题标题】：spaces and   do not have the same width?空格和不具有相同的宽度？
【发布时间】：2021-08-11 14:44:07
【问题描述】：

我有一个 div 和一个 textarea 完全重叠，我输入 textarea 并且该文本被转换为具有不同文本颜色（语法突出显示）的跨度，然后显示在 div 中，所以看起来你正在输入在 div 中，但您实际上是在输入透明文本区域。目前，我只是在文本输入中存在空格的跨度之间放置一个空格，但是如果我连续添加更多空格，它将不起作用（只会显示一个）。所以我尝试使用&nbsp; 代替空格，但我惊讶地发现它的宽度与常规空格不同。那&nbsp;有什么意义呢？

如果&nbsp; 没有，我如何添加与常规空格相同宽度的空格？

这是一个应该是两个完全匹配的行的示例（但不是）。

<span>Hello</span> <span>World</span>
<span>Hello</span>&nbsp;<span>World</span>

注意：我使用的是“FontinSmallCaps”字体，这可能是造成差异的原因，但我不愿意取消它。宁愿过滤用户输入，使其永远不会有两个连续的空格。虽然那将是最后的手段。

如果有什么不清楚或需要详细说明，请告诉我。提前致谢！

【问题讨论】：

标签： html css whitespace font-size

【解决方案1】：

不完全确定您的 HTML 结构，但无论您显示的 HTML 包装如何，都可以设置 white-space: pre，然后空格将全部保留。无需转换它们。

&lt;div style="white-space:pre"&gt;&lt;span style="white-space: pre;"&gt;Hello&lt;/span&gt;      &lt;span&gt;World&lt;/span&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

&nbsp; 是Non-breaking space，另一个被浏览器视为普通字符串。不间断空格意味着该行不应在该点换行，就像它不会被换行在单词中间一样。 &nbsp; 也不会折叠，这可能是它们使用中最重要的方面（至少，我倾向于这样使用它们，快速轻松地填充东西）

【讨论】：