I have this page with an editable div and an uneditable span inside. When you click on the div (at the end of the line) the cursor becomes incorrect, how can this be corrected?

 .tag { background-color: #2475ff; border-radius: 2px; color: #fff; cursor: pointer; display: inline-block; font-size: 10px; font-style: normal; font-weight: 600; height: 18px; line-height: 16px; margin: 3px 0 5px; padding: 1px 10px; text-transform: uppercase; vertical-align: top; } .content { border: 1px solid #e3e3e3; border-radius: 2px; box-sizing: border-box; display: block; font-family: "Open Sans", "Arial", sans-serif; font-size: 14px; line-height: 24px; min-height: 30px; outline: medium none; padding: 0 8px; transition: border 0.2s ease 0s; width: 100%; } .content:focus { border-color: #007c99; } 
 <div class="content" contenteditable="true"> 1111 <span contenteditable="false" class="tag">#tag</span> </div>

    2 answers 2

    Exit found. Wrap the span in a span with a space and write negative side indents so that the cursor gets close to the tag container.

     .tag_container { margin: 0px -5px; } .tag { background-color: #2475ff; border-radius: 2px; color: #fff; cursor: pointer; display: inline-block; font-size: 10px; font-style: normal; font-weight: 600; height: 18px; line-height: 16px; margin: 3px 0 5px; padding: 1px 10px; text-transform: uppercase; vertical-align: top; } .content { border: 1px solid #e3e3e3; border-radius: 2px; box-sizing: border-box; display: block; font-family: "Open Sans", "Arial", sans-serif; font-size: 14px; line-height: 24px; min-height: 30px; outline: medium none; padding: 0 8px; transition: border 0.2s ease 0s; width: 100%; } .content:focus { border-color: #007c99; } 
     <div class="content" contenteditable="true"> 1111 <span contenteditable="false" class="tag_container"> &nbsp; <span contenteditable="false" class="tag">#tag</span> &nbsp; </span> </div>

      Method 1. If you close the tags like this:

       </span></div>

      then the cursor inside the span will not be displayed. However, it seems that he will not appear at all in the last position. At least in chrome.

      Method 2. Add another character after the span, for example, an unbreakable space:

       </span>&nbsp;
      • Unfortunately, if you dynamically insert a span, the space does not help. It is cropped automatically, as I understood ... - Alexey Lemesh
      • tried even <span> </ span> - did not help - Alexey Lemesh