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

There is a way but you need to pro-actively set a few styles. The idea is to tell Chrome that the styles are already taken care of, so it doesn't need to add SPAN to meet the styles requirement. basically, you need to add the chrome added styles to a span class under your contenteditable div ( see example below).

Edited fiddle

For you example:

• I added an "edit" class to the contenteditable DIV
• I added an .edit p, span class in the style

This becomes:

.edit {
  border: 1px solid gray;
  padding: 10px;
}
.edit p, span {
  line-height: 1.44; font-size: 16px;
}

And the DIV:

...

Note that you normally don't need the font-size: 16px;. I needed to add this one because fiddle defines some font size in contenteditable. On a standalone page I didn't need it.

You need to apply this Chrome 'patch' to any elements where it happens (so if you need UL, OL... then add what is needed following my example logic above)