Javascript 添加绝对定位元素会导致换行

我创建了一个“游标”对象，如下所示：

var cursor=document.createElement('span');
cursor.id="currentCursor";
cursor.innerHTML="|";
cursor.style.fontWeight="bold";
cursor.style.position = 'absolute';
cursor.style.marginLeft="-1px";

然后我将其添加到有人单击的页面：

var selection = window.getSelection();
var currentRange = selection.getRangeAt(0);
currentRange.insertNode(cursor);

我遇到的问题是在某些地方（主要是线的末端），如果添加游标对象，它会在对象之前创建一个换行符。使用insertNode将其移动到另一个区域将删除换行符。另外，如果我将显示设置为“无”，请等待几秒钟，然后将其设置回“内联”，断线将被删除

这似乎是浏览器在添加绝对元素时的一个错误，但我想知道是否有人有解决方法。我尝试将宽度设置为0px，但没有效果

更新 因此，如果我将光标更改为

cursor.style.position = 'static';

它没有随机换行。但是，这会导致在图元周围创建空间。有没有办法不让元素在其周围创建空间

更新2

添加了一个小提琴来显示问题： 原始代码有点大，但我精简了它以突出这个问题

如果单击笑脸的末尾，然后键入，则会导致第33行触发创建新文本节点。键入几个字母后，您将看到光标对象被强制移到下一行。单击其他位置将其移动会使线再次合并

如果您取消注释第38行和第40行，您将看到我所说的最初显示：无，稍后更改。这一次它不会导致线路中断

---

我为fiddler编写了一些跨浏览器代码，所以这可能只适用于Chrome，您应该改用CSS。使用z-index甚至float可以（至少应该）解决这个问题。 编辑：始终确保没有其他样式使其断线

但是[

position:static

]会在元素周围创建空间

不，这不是原因–在“它周围”没有实际创建的空间，它只是一个字符的显示宽度加上所用字体的间距，这使span元素本身的宽度大于

字符本身。但是当您绝对定位元素时，您不会注意到这一点，因为它已从流中取出，因此不会将以下字符向右推

我的解决方案是：不要将

|

作为innerHTML放入span中，而是将其保留为空–然后通过给元素一个

左边框：1px solid

来实现该行。删除

位置：绝对

，使其默认为

静态

然后，您可能不喜欢光标的高度，但也可以通过将

display

设置为

inline block

，并给它一个

height

来固定光标的高度

---

在这里，看看你喜欢“dem apples:

你能用CSS代替吗？我不能在鼠标被CSS点击的地方插入元素，但我可以更改“cursor”的CSS属性。如果你将

位置
更改为
相对
，会怎么样？也许你可以创建一个例子来说明你的问题……好吧，添加了fiddle:Position-relative在这个例子中的工作原理与static相同（在前面/后面添加空格）。我使用的是CSS，它只是用javascript声明的？如果你检查这个例子，它并不是真的断开了线，因为将它设置为none并返回，或者只是将它移开并断开，就可以修复断开。太棒了。我非常喜欢苹果。