<br> is inserted into contenteditable html element if left empty

Question

I have a <div contenteditable="true"></div> and when I enter some content into it, then delete these content, it seems like the browser is inserting a <br> element automatically into this element.

Does anyone has any experience with this? Know how to fix it?

Answer 1

Use SPAN element as your contenteditable element instead of DIV element.

Please read complete. Q. Why the idea works? A. Span is an inline element and Div is a block element. Block elements when empty, by default, will have zero dimensions(if no padding is applied to the block element). In contrast, empty inline elements tend to maintain their height and width becomes zero. Hence, we just need to provide proper width to this Span(or any inline element), but, an inline element won't take width as a property and therefore we need to specify the display of this inline element as inline-block or block.

I have extensively used this idea for creating online-editors. Hope this helps.

NOTE: On changing display of an inline element to block/inline-block, doesn't mean the nature of element has changed. It is still an inline element, so an inline element will never be able to hold a block element inside it.