Prevent Chrome from wrapping contents of joined with a

Question

I have observed an undesirable behaviour in Chrome that occurs when one joins two

\'s by deleting the separation between them. Although the

Answer 1

The CSS is influencing how the markup is made inside contenteditable:

div, pre { border: 1px solid gray; padding: 10px; line-height: 1.44; }

Delete the line-height line and the problem doesn't occur any more.

There are in general several bugs with contenteditable related to default styling : How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

EDIT JsFiddle IS indirectly influencing this (tinkerbin behaves differently) because of its' CSS (normalize.css). Try this:

1. Run your fiddle
2. Inspect a

3. Disable all font-size declarations in the CSS stack - including your line-height
4. do the backspace
5. there is no inline span

Solution 1 : Use classes and id's.

Don't declare font-size for p or div but for p.main-content, or more simply, .main-content. If the font-size of your elements inside contenteditable is coming from the browsers' internal default CSS then Chrome won't add extra markup/inline styling.

Solution 2 : Use a Sanitizer.

I'd personally go with #1 as it's never a good practice to specify font-sizes and typo in so generic tags.