css - 在 contenteditable 元素中使用换行符(之后)设置内联元素的样式 - 插入符号位置

Question

我正在对 contenteditable 元素中的内联元素进行样式设置，以直观地表示换行符。

First text(Linebreak)
[C]Second Line

我希望能够将光标放在 [C] 我无法做到的位置。我相信对当前的行为有一个合理的解释。有人愿意解释并可能为我提供不同的方法吗？

编辑:显然它适用于 IE 和 Firefox，但不适用于 Chrome。

.lb{
  display:inline;
}

.lb:after{
  content: "\21B2\A";
  white-space: pre;
  word-wrap: break-word;
}
.edit-box{
  border: 1px solid black;
  padding: 10px;
}

<div id="test" contenteditable="true" class="edit-box">
  How to style the span element<span class="lb"></span>so it's possible to place the cursor at the beginning of this line, before "S".
</div>

Answer 1

尝试在您的 lb 类中添加 .lb:before 进行以下 css 更改:

.lb{
  display:inline;
  white-space: nowrap;
}

.lb:before{
  content:'';
  display:block;
}

.lb:after{
  content: "\21B2\A";
}

这将实现您想要的。我们正在做的是告诉 main lb 不要将文本包裹在里面和周围。接下来我们创建 lb before as block 以将其放入新行，然后创建 lb after 以添加光标，其余文本也随之流动。希望这会有所帮助。