1

因此，我在浏览器中呈现了 HTML 文本（在本例中为 Android WebView）。我想找出任何给定文本行的（x，y）位置（以像素为单位）在 渲染之后是什么。我正在使用的行的工作定义不仅仅是标签中包含的所有文本<p>或出现在<br>标签之前的所有文本。我的意思是用户看到的一条线。

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

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

谢谢！！

4

2 回答 2

2

您不能单独访问一条线路。但是，使用一些 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

注意：这假设容器除了文本什么都没有。

于 2012-09-21T19:41:31.383 回答
0

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

  1. 将每个单词括在一个跨度内，例如<span class="word">word</span>，这可以很容易地用正则表达式或字符串函数完成，稍后循环每个<span>读取它的位置，添加一些计算，你可以找出一行开始的行数（增加它的top位置的单词从最后一个）和一行结束时（行的最后一个单词+该单词的宽度）。

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

    p:first-line{ 背景颜色：白色；/* 相同的现有颜色，所以不影响显示*/ }

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

于 2012-09-21T19:50:43.903 回答