Adding an absolute positioned element causes line break

Question

So I have a "cursor" object created like so:

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

Then I add it to the page where someone clicks with this:

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

The problem I'm running into is in certain places (mainly end of lines) if the cursor object is added it creates a line break before the object. Using insertNode to move it to another area removes the line break. Also if I set the display to "none", wait for a few seconds and then set it back to "inline" the line break is removed.

This seems like maybe a browser bug in adding absolute elements, but I was wondering if someone had a workaround. I've tried setting the width to 0px but it has no effect.

Update So if I change the cursor to

cursor.style.position = 'static';

It doesn't have random line breaks. However this causes space to be created around the element. Any way to not allow elements to create space around them?

Update 2

Added a fiddle to show the problem: http://jsfiddle.net/Mctittles/pSg2D/1/ Original code is a bit large but I slimmed it down to highlight this problem.

If you click at the end of the smiley face and then type it causes line 33 to trigger creating a new text node. After typing a couple letters you'll see the cursor object is forced to the next line. Clicking somewhere else to move it makes the lines merge again.

If you un-comment lines 38 and 40 you'll see what I was talking about with making it initially display:none and changing it later. This time it doesn't cause a line break.

I took out some cross-browser code for fiddler, so this might only work in Chrome

Answer 1

However [position:static] causes space to be created around the element.

No, it doesn’t cause it – there is no actual space created “around it”, it’s just the display width of a character plus spacing in the used font, and that gives the span element itself a width that is more than the | character itself. But when you position the element absolutely, you don’t notice that, because it is taken out of the flow, so it doesn’t push the following characters to the right.

My workaround proposal: Don’t put | into the span as innerHTML, but leave it empty – and then implement the line by giving the element a border-left:1px solid. Remove position:absolute, so that it defaults to static.

Then you might probably not like the height your cursor is getting with that – but that can be fixed as well, by setting display to inline-block, and giving it a height as well.

Here, see how you like ’dem apples: http://jsfiddle.net/pSg2D/9/