нажмите на div [contenteditable], если последний элемент - span [contenteditable = "false"]

Question

Если щелкнуть div после всего текста, div будет выделен, но каретка не установлена ​​(каретка установлена ​​в span.notContentEditable и не показана) (проблема существует в firefox / vivaldi / (chrome) на Ubuntu 19.10))

div[name="comment"] {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 100px;
  width: 100%;
  overflow: auto;
  padding: 5px;
  resize: both;
  margin-bottom: 5px;
}

.bold {
  font-weight: bold;
}

<div name="comment" contenteditable="true">
  <span class="bold" contenteditable="false">spantext</span>
</div>

Answer 1

Непонятно, что вы спрашиваете, но если вы хотите оставить интервал в левом углу, а другой текст не будет перекрывать его, вы можете сделать что-то вроде этого:

(без изменения разметки: )

div[name="comment"] {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 100px;
  width: 100%;
  overflow: auto;
  padding: 5px;
  resize: both;
  margin-bottom: 5px;
  position: relative; /* added */
  padding-left: 60px;
}

.bold {
  font-weight: bold;
}
span {position: absolute; top: 5px; left: 0;}

<div name="comment" contenteditable="true">
  <span class="bold" contenteditable="false">spantext</span>
</div>

Другим решением может быть использование свойства text-indent, но вам нужно немного изменить разметку:

section {position: relative;}

div[name="comment"] {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 100px;
  width: 100%; 
  overflow: auto;
  padding: 5px;
  resize: both;
  margin-bottom: 5px;
  text-indent: 80px; /* space for the first line and on every NEW LINE */
}
.bold {
  font-weight: bold;
}
span {position: absolute; top: 5px; left: 0;}

<section>
  <span class="bold" contenteditable="false">spantext</span>
  <div name="comment" contenteditable="true"></div>
</section>