找不到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'));

Answer 2

如果您知道线高和影响高度的任何其他样式，您可以检查段落的offsetHeight。获得高度后，减去CSS中的任何内容，然后除以线高。

免责声明：我正在通过手机输入此内容并且未进行测试。

Answer 3

如果您想在分词时使用连字符，可以使用hyphens css。

Stack Snippet

div {
  max-width: 150px;
  hyphens: auto;
  margin:auto;
}

p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<div>
  <p>Now in some circumstances, designers may use squares and rectangles to help you visualize what should and could be in a specific location.</p>
</div>

但是这个解决方案有一些浏览器支持问题。

我找到了一篇有用的文章 CSS hyphens