Prevent Chrome from wrapping contents of joined with a

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:

<div contenteditable="true" class="edit">...</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)

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)