Question

所以我有一个像这样创建的“光标”对象：

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

添加了一个小提示来显示问题： http://jsfiddle.net/Mctittles/pSg2D/1/ 原始代码有点大，但我将其缩小以突出显示此问题。

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

如果你取消对第38和第40行的评论，你会看到我在谈论它最初显示的内容：none并在以后更改它。这次它不会导致换行。

我为fiddler提取了一些跨浏览器代码，因此这可能仅适用于Chrome

Answer 1

但是[position:static]会导致在元素周围创建空间。

不，它不会导致它 - 没有“围绕它”创建的实际空间，它只是字符的显示宽度加上使用的字体中的间距，并且给出了跨度element本身的宽度大于|个字符本身。但是当你绝对定位元素时，你不会注意，因为它被取出流，所以它不会将后面的字符向右推。

我的解决方案提议：不要将|作为innerHTML放入span中，但将其留空 - 然后通过给元素border-left:1px solid实现该行。删除position:absolute，以便默认为static。

然后你可能不喜欢光标所带来的高度 - 但也可以通过将display设置为inline-block并将其设为height来修复好。

在这里，看看你喜欢'dem apples：http://jsfiddle.net/pSg2D/9/

Answer 2

您应该使用CSS代替。使用z-index甚至可能浮动（至少应该）解决这个问题。 编辑：始终确保没有其他样式让它破裂！

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

2 个答案: