jquery - 垂直居中文本 (jQuery)

Question

<div style="width: 100px; height:50px; line-height:50px; overflow:hidden;">
    <p>A short line</p>
</div>

<div style="width: 100px; height:50px; line-height:50px; overflow:hidden;">
    <p>A really really really long line</p>
</div>

第二个示例中的换行文本由于 line-height:50px 在本例中应为 25px 而被截断。如何使用 jQuery 查找元素中是否有单行或多行文本？

谢谢!

Answer 1

也许您可以将 div 的高度设置为 auto，获取其高度并将其存储在变量中，将其高度设置回 50px，然后检查该变量以查看元素的高度是否超过 50px。如果是，那么您可以运行一个函数来相应地调整行高。您只需将变量除以 50 即可得到大概的行数(即，如果高度 = 150px，您可以假设有 3 行文本)，然后您可以相应地设置行高。

不确定这是否有效，但如果您使用 jQuery，则类似这样:

$('div').css('height', 'auto');

var divHeight = $('div').height();

$('div').css('height', '50px');

if (divHeight > 50) {
    var lineHeight = (divHeight / 50) + 'px';

    $('div').css('line-height', lineHeight);
}