javascript - 在 div 中找到文本换行的行数

Question

是否有任何方法可以使用 word-break:break-all css 属性找到文本中断的行数。假设我给了一个 div 作为

<div>Sample text to verify how many lines the text got broken</div>

CSS 是

div{
  width: 100px;
  word-break: break-all;
}

现在浏览器将显示如下，我想知道它从文本中断开了多少行。

请帮助我如何实现这一目标。

Answer 1

您可以根据行高计算容器的大小:

var getLines = function ($container) {
    var linehight = parseFloat(window.getComputedStyle($container[0], null).getPropertyValue("line-height"), 10);
    var boxHeight = $container.height();
    var numberOfLines = Math.round(boxHeight / linehight);
    return numberOfLines;
};

//To use it just call the function and pass in your class/selector
var numberOfLines = getLines($('.my-container'));