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>

第二个例子中的包装文本由于行高而被切断：50px，在这种情况下应为25px。如何使用jQuery查找元素中的单行或多行文本？

谢谢！

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

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

希望它有所帮助！

垂直居中文本（jQuery）

2 个答案: