Question

我有一个内容可编辑的div，其中3行由BR tag

分隔

点击第二行会导致比第一行更大的光标。

.content {
    line-height: 35px;
}

<div class="content" contenteditable="true">
    first line<br>
    clik here<br>
    lastline
</div>

我们如何才能使所有行的光标大小相同？

Answer 1

＆＃13;

.content
{
   line-height: 35px; 
}

.content br
{
    display:block;
    margin: 10px 0px;
    content: "" !important;
}

＆＃13;

<div class="content" contenteditable="true">
    first line<br>
    clik here<br>
    lastline
</div>

＆＃13;

尝试添加特定类以在内容div

下重置br

更好的方式，不需要影响dom 是为每个br添加虚构内容，以呈现为真正的块

.content br
{
    display:block;
    margin: 10px 0px;
    content: "" !important;
}

注意：定义的边距不是真正需要的，但可以不依赖于div行高，并根据需要进行调整

文档：寻找css content属性 https://developer.mozilla.org/fr/docs/Web/CSS/content

Answer 2

试试这个

    <div class="content" contenteditable="true"> <span>first line</span> <span>click here</span> <span>lastline</span> </div>

.content{
    line-height: 35px;
}
.content span:nth-child(2){
   padding:10px 0;
}

.content span{
    display:block;
}

您可以在此处查看演示https://jsfiddle.net/tenigada/wnkehtkg/2/

不同行的光标大小不同

2 个答案: