空格 和 的宽度不一样?

spaces and   do not have the same width?

我有一个 div 和一个完全重叠的 textarea,我在 textarea 中输入,然后该文本被转换为具有不同文本颜色(语法突出显示)的 span,然后显示在 div,所以看起来您是在 div 中输入,但实际上您是在透明文本区域中输入。目前我只是在文本输入中存在 space 的跨度之间放置一个 space,但是如果我在系列中添加更多 spaces 它不起作用(只有一个会展示)。所以我尝试使用   而不是 spaces 但我惊讶地发现它的宽度与常规 spaces 不同。那么 有什么意义呢?

简而言之,如果   没有,我如何添加与常规 space 具有相同宽度的 space?

下面是两条完全匹配的线(但不是)的示例。

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

注意:我使用的字体是“FontinSmallCaps”,可能是这个原因造成的,但我不愿意取消它。宁愿过滤用户输入永远不会有两个连续的 spaces。尽管那将是最后的手段。

如果有任何不清楚或需要详细说明的地方,请告诉我。 提前致谢!

不完全确定你的 HTML 结构,但是你所显示的 HTML 的任何包装都可以设置 white-space: pre,那么空格将全部保留。无需转换。

<div style="white-space:pre"><span style="white-space: pre;">Hello</span>      <span>World</span></div>

&nbsp;Non-breaking space,另一个被浏览器认为是普通字符串。不间断的 space 意味着该行不应在该点换行,就像它不会在单词中间换行一样。 &nbsp; 也不会塌陷,这可能是它们使用中最重要的方面(至少,这就是我倾向于使用它们的方式,快速简单地填充东西)