时间戳

首页 > 解决方案 > 尽管 innerHTML 没有明确的新行、制表符或

javascript - 尽管 innerHTML 没有明确的新行、制表符或

问题描述

我的目标是为每个字符赋予不同的 css 特征，但它仍然使用 chrome 扩展保持其形式为单词。

原始元素是

Art info

使用 chrome 扩展，我用 span 包裹了每个字符。

<span wms-wrap>
<span>A</span>
<span>r</span>
<span>t</span>
 <span>i</span>
<span>n</span>
<span>f</span>
<span>o</span>
</span>

我在 chrome by 中检查了它的 innerHTML，它显示 $0.innerHTML

<span>A</span><span>r</span><span>t</span> <span>i</span><span>n</span><span>f</span><span>o</span>

这正是我想要的。

但是，当我在 chrome 中检查其 innerText 时，它表明

$0.innerText
"A
R
T
I
C
L
E
I
N
F
O"

发现在每个跨度之间插入了新行。

我在网上搜索并应用了一些建议，例如 nobr 标签和 <style="white-space: nowrap;"> 但仍然添加了新行。

如何防止这些意外的新行？

标签： javascripthtmlcss

解决方案

换行符在那里是因为它们在您的源代码中。空白为display折叠，这可能会受到 CSS 的影响，但是您正在查看 DOM，它是该显示逻辑的输入，因此需要保留原始空白。

您可以将源代码更改为不包含换行符，或者稍后使用 JavaScript string.replace 调用去除它们。由于您没有显示太多代码，因此很难比这更具体。

另一方面，如果重要的是它的外观，不要太担心 DOM。

推荐阅读