代码之家 › 专栏 › 技术社区 › buti-oxa

如何计算DOM元素内的文本行数?我可以吗?

dom html javascript

167

buti-oxa · 技术社区 · 17 年前

<div id="content">hello how are you?</div>

21 回复 | 直到 17 年前

Sailist 4 年前

如果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>

Sailist 4 年前

查看功能 getClientRects() 其可用于对元素中的行数进行计数。以下是一个如何使用它的示例。

var message_lines = $("#message_container")[0].getClientRects();

它返回一个javascript DOM对象。通过这样做可以知道线的数量:

var amount_of_lines = message_lines.length;

需要注意的是,它只有在包含元素是内联的情况下才有效,但是您可以用块元素围绕包含内联元素来控制宽度,如下所示:

console.log(  message_container.getClientRects().length  )

<div style="display:inline;" id="message_container">
  ..Text of the post..<br>
  nice ha?
</div>

虽然我不建议对这种风格进行硬编码。这只是为了举例。

Tiago Maciel 3 年前

推荐文章

Robo Robok · 为什么我无法使用Dom\HTMLDocument搜索标签?

1 年前

Y-jiji · 调整大小时替换了假选择

1 年前

LLScheme · 无法使用Playwright&Pyppeteer找到关键字

1 年前

Konrad Viltersten · 无法修改ViewContainerRef的内部内容,只能在Angular中添加标签

1 年前

Eric G · 如何将svg文本元素垂直居中?

2 年前

Nail Val · 当条件通过时,If语句不显示console.log,并按意外情况继续工作

2 年前

Juan Lanus · 如何获取对所选内容的DOM元素的引用

2 年前

huz3y · addEventListener不适用于从javascript添加的新类所选的元素

2 年前

Toby Hogan · 元素React状态更改后未在DOM中更新

2 年前

user23745914 · 能够访问javascript中的dom元素,而无需显式定义查询选择器

2 年前