CODEWITHSUNDEEP
cssinternet-explorerfrontendcontenteditable
Nikolai Mavrenkov
Nikolai Mavrenkov

Reputation: 1923

Line break before and after inline contenteditable element in IE

I need to make inline element contenteditable. It works fine for Chrome/Firefox, but IE (11 at least) inserts line break before and after span if it's contenteditable.

Link to fiddle: https://jsfiddle.net/nokpy02g/1/

This is how it looks like in Chrome:

chrome

And this is IE:

enter image description here

Is there is any way to fix it?

UPD:

My IE version:

enter image description here

IE mode on my fiddle page:

enter image description here

Also, I am using Windows 7 Professional, 64bit

Upvotes: 1

Views: 790

Answers (2)

user2173353
user2173353

Reputation: 4640

In my case, I used the :before and :after pseudo-elements to achieve this. 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 ("4.5") non-editable and the rest editable.

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

Upvotes: 0

wilsonzlin
wilsonzlin

Reputation: 2230

Be aware: contentEditable is extremely buggy and inconsistent across all browsers and even versions. You are much, much better of using a JS WYSIWYG editor like CKEditor (which can edit inline). For example, some browsers will wrap the previous block of text when pressing Enter in a <p> or <div> or <span>, while others will enter <br>. Sometimes a <br> or two must be at the front or end. Two <br>s count as a single line...until it doesn't. IE doesn't support contentEditable properly in table or inline elements. Pasting inserts HTML rather than text. The problems go on and on, and will cause you endless frustration.

Upvotes: 2

Related Questions