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:

CodePudding user response：

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>

CodePudding user response：

Because there is no text in the p tag and that's why text starts from the span tag. That's why text is written in a span tag with it's properties. At least add &nbsp after span tag.

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>