例如，我想知道是否有一种方法可以计算 div 内的行数。假设我们有一个像这样的 div：
<div id="content">hello how are you?</div>
根据许多因素，div 可以有一行、两行，甚至四行文本。有没有办法让脚本知道？
换句话说，在 DOM 中是否表示自动中断？
如何计算 DOM 元素内的文本行数？我可以吗？
IT技术
javascript
html
dom
2021-01-22 13:20:52
6个回答
如果 div 的大小取决于内容（我假设您的描述是这种情况），那么您可以使用以下方法检索 div 的高度：
var divHeight = document.getElementById('content').offsetHeight;
并除以字体行高：
document.getElementById('content').style.lineHeight;
或者在没有明确设置的情况下获取行高：
var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");
您还需要考虑填充和行间距。
编辑
完全独立的测试，明确设置行高：
function countLines() {
var el = document.getElementById('content');
var divHeight = el.offsetHeight
var lineHeight = parseInt(el.style.lineHeight);
var lines = divHeight / lineHeight;
alert("Lines: " + lines);
}<body onload="countLines();">
<div id="content" style="width: 80px; line-height: 20px">
hello how are you? hello how are you? hello how are you? hello how are you?
</div>
</body>查看可用于计算元素中行数的函数getClientRects()。这是一个如何使用它的示例。
var message_lines = $("#message_container")[0].getClientRects();
它返回一个 javascript DOM 对象。通过这样做可以知道行的数量：
var amount_of_lines = message_lines.length;
它可以返回每行的高度，等等。通过将其添加到您的脚本中，然后查看您的控制台日志，查看它可以执行的所有操作。
console.log("");
console.log("message_lines");
console.log(".............................................");
console.dir(message_lines);
console.log("");
虽然需要注意的一些事情是它只在包含元素是内联的情况下才有效，但是你可以用块元素包围包含的内联元素来控制宽度，如下所示：
<div style="width:300px;" id="block_message_container">
<div style="display:inline;" id="message_container">
..Text of the post..
</div>
</div>
虽然我不建议像那样硬编码风格。这仅用于示例目的。
一种解决方案是使用脚本将每个单词都包含在 span 标签中。然后，如果给定跨度标记的 Y 维度小于其直接前任的 Y 维度，则发生换行。
我对这里和其他问题的答案不满意。评分最高的答案没有考虑padding或border考虑，因此显然也忽略box-sizing了。我的回答结合了这里和其他线程上的一些技术，以获得令我满意的解决方案。
它并不完美：当无法检索到line-height（例如normal或inherit）的数值时，它仅使用font-size乘以1.2。也许其他人可以建议一种可靠的方法来检测这些情况下的像素值。
除此之外，它已经能够正确处理我抛出的大多数样式和案例。
jsFiddle用于播放和测试。下面也内联。
function countLines(target) {
var style = window.getComputedStyle(target, null);
var height = parseInt(style.getPropertyValue("height"));
var font_size = parseInt(style.getPropertyValue("font-size"));
var line_height = parseInt(style.getPropertyValue("line-height"));
var box_sizing = style.getPropertyValue("box-sizing");
if(isNaN(line_height)) line_height = font_size * 1.2;
if(box_sizing=='border-box')
{
var padding_top = parseInt(style.getPropertyValue("padding-top"));
var padding_bottom = parseInt(style.getPropertyValue("padding-bottom"));
var border_top = parseInt(style.getPropertyValue("border-top-width"));
var border_bottom = parseInt(style.getPropertyValue("border-bottom-width"));
height = height - padding_top - padding_bottom - border_top - border_bottom
}
var lines = Math.ceil(height / line_height);
alert("Lines: " + lines);
return lines;
}
countLines(document.getElementById("foo"));div
{
padding:100px 0 10% 0;
background: pink;
box-sizing: border-box;
border:30px solid red;
}<div id="foo">
x<br>
x<br>
x<br>
x<br>
</div>克隆容器对象并写入 2 个字母并计算高度。这将返回应用了所有样式的实际高度、行高等。现在，计算高度对象/字母的大小。在 Jquery 中，高度优于 padding、margin 和 border，计算每行的实际高度非常棒：
other = obj.clone();
other.html('a<br>b').hide().appendTo('body');
size = other.height() / 2;
other.remove();
lines = obj.height() / size;
如果您使用每个字母高度不同的稀有字体，这将不起作用。但适用于所有普通字体，如 Arial、mono、comics、Verdana 等。使用您的字体进行测试。
例子：
<div id="content" style="width: 100px">hello how are you? hello how are you? hello how are you?</div>
<script type="text/javascript">
$(document).ready(function(){
calculate = function(obj){
other = obj.clone();
other.html('a<br>b').hide().appendTo('body');
size = other.height() / 2;
other.remove();
return obj.height() / size;
}
n = calculate($('#content'));
alert(n + ' lines');
});
</script>
结果： 6 Lines
适用于所有浏览器，没有超出标准的罕见功能。