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

时间:2016-11-21 13:32:05

标签: css html5 contenteditable

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

"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;
}

4 个答案:

答案 0 :(得分:0)

您可以将每个新行换行到<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>

答案 1 :(得分:0)

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

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

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

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

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

答案 2 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

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

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

答案 3 :(得分:-1)

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