在没有文字的contenteditable div中的插入式样

时间:2014-11-20 00:24:40

标签: html css contenteditable caret

当div中没有​​文本时,如何设置插入符号的插入符号。

在输入文字之前: enter image description here

输入文字后: enter image description here

注意前一个镜头上的插入符号是如何对着div的顶部,而不是像输入文本时一样垂直居中。我知道您之前可以使用<br>预填充div并修复它但我希望有更好的解决方案。这是一件让我困扰一段时间的小事。

1 个答案:

答案 0 :(得分:1)

我发现了问题,您无法使用line-height。您需要使用padding。这是差异http://jsfiddle.net/frcso1n9/1/

HTML

<div class="lineheight">
    <div contenteditable="true"></div>
    <div contenteditable="true">with text</div>
</div>
<br>
<div class="padding">
    <div contenteditable="true"></div>
    <div contenteditable="true">with text</div>
</div>

CSS

.lineheight div {
    border: 1px solid black;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
}
.padding div {
    border: 1px solid black;
    margin-bottom: 5px;
    padding: 5px 10px;
}