Css 在内容可编辑元素中使用换行符（后）设置内联元素的样式-插入符号位置

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

First text(Linebreak)
[C]Second Line

我希望能够将光标放置在我无法放置的

[C]

位置。 我相信对目前的行为有一个合理的解释。有人愿意解释一下，或者给我一个不同的方法吗

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

.lb{
显示：内联；
}
.lb：之后{
内容：“\21B2\A”；
空白：预处理；
单词包装：打断单词；
}
.编辑框{
边框：1px纯黑；
填充：10px；
}

如何设置跨度元素的样式，以便可以将光标放置在此行的开头，即“s”之前。

您可以将每一行新行包装成一个

。编辑框{
边框：1px纯黑；
填充：10px；
}
.编辑框p{
保证金：0
}
p:不是（：最后一个孩子）：之后{
内容：“\21B2”；
}

如何设置跨度图元的样式

因此，可以将光标放在这一行的开头，在“s”之前

在lb类中添加.lb:before，尝试以下css更改：

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

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

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

---

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

当您在

div

中包装“第二行”时，它似乎起到了作用：

我想出了一种不同的方法，将BR元素包装成span：

。编辑框{
边框：1px纯黑；
填充：10px；
}
.图标{
宽度：15px；
}
.图标：：之前{
内容：“\21B2”；
}

如何设置跨度元素的样式，以便可以将光标
放置在此行开头的“at”之前。

可能重复的@ksav不是OP要求的。@ksav我想手动放置光标，而不是通过javascript。@ksav鼠标或箭头键。检查代码段。在您提供的代码段中，可以将光标放在您请求的位置。这对我有用。检查此屏幕截图：。我也在codepen工作。选中此处：光标应位于“so”和第二行之前。另外，“新行”unicode字符应该在前一行的末尾。不，在Firefox OSX上没有，新行字符在第二行line@kwicher根据你的建议，是的，我同意它在第二行。但是，我希望它位于第一行的末尾。如果您运行我的原始代码段，它是否显示在第二行？好的，我认为我错误地解释了新行字符，正如您在第二行开头所希望的那样。让我回到这个选项。第一个选项，如果我删除段落标记并放置一个
我可以实现同样的效果。但我想直观地显示带有unicode字符“21B2”的换行符。另外，您的第二个选项需要更多的javascript处理来实现您的建议。就代码而言，我目前正在做的唯一一件事是捕获按键事件并防止新行的默认行为，而是插入“”。我明白了。我已经编辑了第一个选项，在每个

之后添加

\21B2

，这不是最后一个。到目前为止，您的第一个选项是最吸引人的。如果没有其他解决方案出现，我将在1天内将其标记为已回答。谢谢