html - 没有文本的 contenteditable div 中的插入符号样式

Question

当 div 中没有文本时，如何为可内容编辑的 div 设置插入符号的样式。

输入文本之前:

输入文字后:

请注意前一张照片中的插入符号是如何靠在 div 的顶部，而不是像输入文本后那样垂直居中。我知道您可以使用 <br> 预填充 div之前，它修复了它，但我希望有更好的解决方案。这是一件困扰我一段时间的小事。

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