Span with contenteditable attribute won't behave as an inline element in IE11

Question

I am having two span elements inside a div that has limited width. The text content of the two merge seamlessly into one continuous "paragraph".

However, I need the second span to be a contenteditable="true".

But when I add the attribute, the text of the second element starts from a new line in IE11.

<div style="width:200px">
  <span>4.5</span> <span contenteditable="true">Test this simple layout in IE11 and see the wonders of the internet!</span>
</div>

Here is the JsFiddle for you to play with: https://jsfiddle.net/enoq0xk3/

Is there any known fix for that?

Answer 1

OK. I have a fix for my case:

https://jsfiddle.net/on695rz2/2/

[contenteditable=true]:before {
  content: attr(before-content);
  margin-right: 2px;
}

<div style="width:200px">
  <span before-content="4.5" contenteditable="true">Test this simple layout in IE11 and see the wonders of the internet!</span>
</div>

This keeps the first part non-editable and the rest editable.

The UX is only good on IE though... so you need to switch implementations accordingly.