垂直居中文本 (jQuery)答案

【问题标题】：Vertical centering text (jQuery)垂直居中文本 (jQuery)
【发布时间】：2011-02-03 08:03:44
【问题描述】：

<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 查找元素中是否存在单行或多行文本？

谢谢！

【问题讨论】：

标签： jquery html css height

【解决方案1】：

也许您可以将 div 的高度设置为 auto，获取它的高度并将其存储在一个变量中，将其高度设置回 50px，然后检查该变量以查看元素的高度是否超过 50px。如果是，那么您可以运行一个函数来相应地调整行高。您可以将变量除以 50 以获得大致的行数（即如果 height = 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);
}

【讨论】：

【解决方案2】：

文本宽度大于文档宽度时出现多行文本

In a previous SO question, I found this solution to discovering text width。现在您需要做的就是将文本宽度与 div 的宽度（在本例中为 100px）进行比较。如果它更大，它将是多行的。请记住，包含任何填充可能会在以后添加到您的 DIV。

只是为了帮助，这是我指的代码（虽然它不是我的）

$.fn.textWidth = function(){
  var sensor = $('<div />').css({margin: 0, padding: 0});
  $(this).append(sensor);
  var width = sensor.width();
  sensor.remove();
  return width;
};

希望对你有帮助！

【讨论】：