Question

我在一个可信的元素中设计内联元素，以直观地表示换行符。

"message":"java.lang.RuntimeException: java.lang.RuntimeException: java.lang.RuntimeException: java.io.FileNotFoundException: File './src/main/webapp/i18n/de/backend.json' does not exist"

我希望能够将光标放在我无法找到的First text(Linebreak) [C]Second Line位置。我相信对目前的行为有一个合理的解释。有人在乎解释，也许会给我一个不同的方法吗？

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

[C]

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

Answer 1

您可以将每个新行换行到<p>。

.edit-box {
  border: 1px solid black;
  padding: 10px;
}
.edit-box p {
  margin: 0
}
p:not(:last-child):after {
  content: "\21B2";
}

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

或者将第二行包装在显示为块的范围内：

.edit-box {
  border: 1px solid black;
  padding: 10px;
}
.edit-box span {
  display: block;
}

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

Answer 2

在lb类中尝试跟随css更改并添加.lb：before：

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

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

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

这将实现你想要的。我们正在做的是我们告诉主要的lb不要将文本包装在其中或周围。接下来，我们创建lb之前作为块以使其进入新行，然后创建lb之后添加光标，其余文本随之流动。希望这会有所帮助。

Answer 3

我通过用这样的跨度包裹BR元素来提出不同的方法：

＆＃13;

.edit-box{
  border: 1px solid black;
  padding: 10px;
}

.icon{
  width:15px;  
}
.icon::before{
    content: "\21B2";
}

＆＃13;

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

＆＃13;

基本上，linebreak类型接收视觉维度并保持其常规行为。

对于特定的contenteditable元素，我捕获返回键的所有按键事件并粘贴<span class="icon"><br></span>，以防止默认行为。

Answer 4

当您在“{1}}中填写”第二行“时似乎有效：https://jsfiddle.net/n944cfgo/2/

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

4 个答案: