如何使用 jQuery 检查行数

Posted 2023-03-14

【中文标题】如何使用 jQuery 检查行数

【英文标题】：How to check for # of lines using jQuery

【发布时间】：2010-12-20 18:45:16

【问题描述】：

示例：一个宽度为 30 像素的 div，其中包含“这是文本”字样。比方说，由于宽度很窄，它在页面上呈现如下：

这个 是 文字

（3 行）。 jQuery中有没有办法告诉渲染到页面需要多少行？例如，$("#container").lineCount()。

商业目的：如果我的内容超过了一定的行数，我想操作它让滚动条不出现，但我也有固定高度，所以我不想乱用overflow css prop .

谢谢！

【参考方案1】：

这很棘手，但可以做到，即使没有指定行高或其他样式。它确实涉及到一堆活动部件。

首先，构建一个“牺牲”容器<div>。用已知数量的文本填充它，每行一个字符，并将其放置在远离屏幕的位置：

// calculate height per line
$calcdiv = $('<div/>').css(
  width: '50px',
  position: 'absolute', // don't affect layout
  left: '-2000px' // position far off=screen
).html('A<br />B<br />C<br />D<br />E'); // add five lines

$('body').append( $calcdiv ); // make the browser render it

var lineHeight = $calcdiv.height()/5; // average height per line

现在我们知道了此浏览器呈现的线条的大致高度（以像素为单位）。我们将注意力转向要测量的框：

$origDiv = $('div#div_to_measure');
$measureDiv = $origDiv.clone(); // clone it
$measureDiv.css(
  position: 'absolute',
  left: '-1000px', // position far off-screen
  height: 'auto' // let it grow to its natural full height
);
$('body').append( $measurediv ); // add it to the DOM, browser will render it

...现在我们知道如果允许达到浏览器呈现的自然尺寸，框内的大致行数：

var numLines = $measureDiv.height() / lineHeight;

我们必须clone()，因为要测量的原始框的高度可能会受到当前页面样式和布局的限制。

现在进行一些清理：

$calcdiv.remove();
$measureDiv.remove();

这是一个例子：http://jsfiddle.net/redler/FuWue/

【讨论】：

我知道这是一篇旧帖子，但谢谢。这完全帮助了我当前的项目。此外，对于每个$calcdiv 和$measureDiv，我为font-size、font-family、font-weight 和line-height 添加了css 属性，并将其设置为原始div 的属性。