我在一个可信的元素中设计内联元素,以直观地表示换行符。
"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;
}
答案 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元素来提出不同的方法:
.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>
,以防止默认行为。
答案 3 :(得分:-1)
当您在“{1}}中填写”第二行“时似乎有效:https://jsfiddle.net/n944cfgo/2/