on pressing enter in contenteditable its copying line style/title to next line

Issue

I have simple contententeditable div

<div contenteditable="true">
  <p>
    Line 1 <span title="action">action</span>
  </p>
</div>

If the user click at the end of line 1 and press enter, then start typing. The next line also copies the same span's background. How to avoid it? see demo: https://jsfiddle.net/89z5d2r0/1/

Solution

You can add a non-breaking space or &nbsp after the span tag to circumvent this behavior. See the snippet below:

div {
  width: 200px;
  height: 200px;
  border: 1px solid #f1f2f3;
}

p span {
  background: #ccc;
}

<div contenteditable="true">
  <p>
    Line 1 <span title="action">action</span>&nbsp
  </p>
</div>

Answered By - Yong