在屏幕上查找线的位置

Question

所以我在浏览器中呈现HTML文本（在本例中是Android WebView）。我想知道任何给定文本行的像素（x，y）位置是 AFTER 呈现的内容。我使用的第一行的工作定义不仅仅是<p>标记中包含的所有文字，也不是<br>标记之前的文字。我指的是用户看来的一条线。

我对任何建议的方法持开放态度。

是否有任何CSS属性可以找到div中的行数及其各自的高度？这将提供一个可行的解决方案。

谢谢！

Answer 1

您无法单独访问线路。但是，使用一些JavaScript，您可以找到具有已知索引的行的位置;这是一个基本概要：

var p = document.getElementById("ptag"); //get the text container that contains your line
var nthline = 3; //the line for which you'd like to find the position
var lnheight = parseInt(window.getComputedStyle(p).lineHeight); //get the height of each line
var linepos = [p.offsetLeft, p.offsetTop + lnheight * (nthline - 1)]; //a [left, top] pair that represents the line's position

注意：这假设容器除了文本之外没有任何内容。

Answer 2

没有标准的方法，你必须参考你的想象力并发明一些黑客，现在我可以想到两个想法：

1. 将每个单词括在一个范围内，如<span class="word">word</span>，可以使用正则表达式轻松完成 字符串函数，稍后循环遍历每个<span>读取它 位置，添加一些计算，你可以找出多少 一行开始的行（增加其top位置的单词 从最后一个）和一行结束（行的最后一个字+宽度 那个词）。

2. 使用:first-line伪元素将一些样式应用于第一行， 像

   p：第一线{background-color：white; / *同样存在的颜色 没有影响显示* /}

   稍后在DOM中找到应用该样式的文本。这个想法不是 好的，第一个，但也许它可以让你想到其他方式。