css - 减小 contenteditable 元素中光标的大小

Question

我正在尝试学习一些 CSS，目前我正在努力解决以下问题:在 following code 中如果您将尝试在跨度内编辑文本，则光标(大闪烁线)太大。

有没有办法让它与文本大小相同，同时让其他一切看起来都一样(我假设我的 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

问题是您的行高太大了。我知道您这样做是为了使文本垂直居中，但是您将不得不寻找另一种方法。由于您使用的是设置高度，您可以只使用 top 或 margin-top 将文本向下推到中间。

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

如果你想覆盖你的文本进入多行的情况，你可以使用 translateY(-50%) 转换。

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