减少contenteditable元素中光标的大小

Question

我正在尝试学习一些CSS，我目前正在努力解决以下问题：在following code中，如果您尝试编辑跨度内的文本，则光标（大闪烁线）太大。< / p>

有没有办法让它与文本大小相同，而其他一切看起来都一样（我认为我的CSS不是很好，所以可以改变）。

.thumbnail-descr{
    min-height: 10px;
    display: table-cell;
    vertical-align: middle;
    font-size: 26pt;
    color: #bbb;
    outline:none;
}

P.S。问题在于我line-height内的.square，但删除它会删除我的文字在中心。

Answer 1

问题在于您的大量line-height。我意识到你这样做是为了垂直居中文本，但你必须找到另一种方式。由于您使用的是设置高度，因此您可以使用top或margin-top将文本向下推到中途。

http://jsfiddle.net/M4fKM/4/

如果您希望涵盖文字分为多行的情况，可以使用translateY(-50%)转换。

http://jsfiddle.net/M4fKM/5/