如何找到浏览器中断一段文本的位置答案

【问题标题】：How to find where browser breaks a paragraph of text如何找到浏览器中断一段文本的位置
【发布时间】：2010-10-01 14:44:16
【问题描述】：

我需要在浏览器在一段文本中自然添加换行符的位置添加换行符。

例如：

这是一段很长的文本\n，跨越段落中的多行。

这是浏览器选择在\n

的位置分断的段落

我需要找到这个位置并插入一个

有没有人知道任何能够做到这一点的 JS 库或函数？

到目前为止，我发现的唯一解决方案是从段落中删除标记并观察 clientHeight 属性以检测元素高度的变化。我没有时间完成这个，想找一些已经测试过的东西。

编辑： 我需要这样做的原因是我需要准确地将 HTML 转换为 PDF。 Acrobat 呈现的文本比浏览器更窄。这会导致文本在不同位置中断。我需要在转换后的 PDF 中具有相同的参差不齐的边缘和相同的行数。

编辑：

@dtsazza：感谢您深思熟虑的回答。生成一个几乎完全复制我编写的 99% 的 HTML 的布局编辑器并非不可能；)

我正在开发的应用程序允许用户通过拖动“磁贴”来创建产品目录。磁贴是固定宽度、绝对定位的包含图像和文本的 div。所有元素都有样式，因此字体大小是固定的。我在段落中查找 \n 的解决方案在 80% 的情况下都可以，并且当它与给定的段落一起使用时，生成的 PDF 非常接近屏幕上的版本，因此差异并不重要。段落的高度相同（到像素），图像被替换为高分辨率版本，所有位图作品被替换为服务器端生成的 SVG。

我的 HTML 和 PDF 之间唯一的轻微区别是 Acrobat 呈现的文本稍微更窄，这导致行的行长略短。

Diodeus 的添加跨度并找到它们的坐标的解决方案非常好，应该给我 BR 的位置。请记住，用户永远不会看到插入了 BR 的 HTML - 添加这些 BR 是为了使 PDF 转换产生一个大小完全相同的段落。

很多人似乎认为这是不可能的。我已经有一个可以工作的应用程序，它为我们的文档创建了非常准确的 HTML->PDF 转换 - 我只需要一个更好的添加 BR 的解决方案，因为我的解决方案有时会错过一个 BR。顺便说一句，当它确实有效时，我的段落与 HTML 等价物的高度相同，这是我们所追求的结果。

如果有人对我正在转换的文档类型感兴趣，那么您可以查看此截屏视频：

http://www.localsa.com.au/brochure/brochure.html

编辑：非常感谢 Diodeus - 您的建议是正确的。

解决方案：对于我的情况，将单词包装在 span 而不是空格中更有意义。

var text = paragraphElement.innerHTML.replace(/ /g, ' ');

text = ""+text+""; //包装第一个和最后一个单词。

这会将每个单词包装在一个跨度中。我现在可以查询文档以获取所有单词，迭代并比较 y 位置。当 y pos 改变时添加一个 br。

这完美无缺，并为我提供了我需要的结果 - 谢谢！

【问题讨论】：

你能解释一下为什么你需要 br 的吗？换行符是一种渲染特性，它与字体和屏幕大小有关。此外，如果您调整窗口大小，换行符可能会在其他地方。
你可能会遇到一些问题，因为如果这个人改变了字体大小，那么你的休息时间可能会落在奇怪的地方
我需要将 HTML 准确地转换为 PDF。字体在 PDF 中呈现稍窄，这会导致文本在转换时在不同位置中断。
您能解释一下保留粗糙边缘的重要性吗？
这只是项目的要求。我正在开发一个 HTML/JS 小册子设计器。最终产品 (PDF) 需要与屏幕上的版本相匹配。

标签： javascript html

【解决方案1】：

我建议将所有空格包装在一个跨度标签中并找到每个标签的坐标。当 Y 值发生变化时，您将处于新的一行。

【讨论】：

但是你呢？我会在这里通宵>
@Diodeus：好主意会试一试。
我在使用花哨的非浏览器字体中的每个字符的位图构建就地编辑器时遇到了同样的问题。我必须自己想办法换行。呃。
感谢您的帮助 Diodeus，我已经完成您的想法的一半，它的工作就像一个魅力 :)

【解决方案2】：

我认为不会有一个非常干净的解决方案来解决这个问题，如果有的话。浏览器将流动一个段落以适应可用空间，并在需要时换行。考虑一下，如果用户调整浏览器窗口的大小，所有段落都将被重新呈现，并且几乎肯定会改变它们的中断位置。如果用户更改页面上文本的大小，段落将使用不同的换行点重新呈现。如果您（或您页面上的某些脚本）更改页面上另一个元素的大小，这将更改可用于浮动段落的空间量，并再次更改 - 不同的换行点。

此外，更改页面的实际标记以模仿浏览器为您所做的事情（并且做得很好）似乎是您所做的任何事情的错误方法。您要在这里解决的实际问题是什么？可能有更好的方法来实现它。

编辑：好的，所以您想像“屏幕版本”一样渲染为 PDF。您是否指定了特定的最终屏幕版本 - 在浏览器窗口尺寸、用户样式表、字体偏好和调整后的字体大小方面？ HTML 的关键在于它故意不指定特定的布局。它只是简单地描述了页面上的内容、它们是什么以及它们彼此之间的关系。

我之前看到过几次错误的尝试，他们试图制作一些 HTML 来精确复制印刷的广告素材，这些 HTML 是在 DTP 应用程序中设计的，其中明确的绝对布局是必不可少的。由于 HTML 的性质，这些努力注定要失败，而反过来（正如您尝试的那样）会更更糟糕，因为您甚至没有明确的起点工作。

假设这一切都超出了您的掌控，并且您必须这样做无论如何，我的建议是放弃修改 HTML 的想法。查看 PDF 转换软件 - 如果它有任何好处，它应该为您提供一些字体字距调整和类似设置的选项。在这里玩弄细节应该会让你得到一些近似于浏览器中字体渲染的东西，从而在相同的地方换行。

如果做不到这一点，我所能建议的就是截取浏览器的屏幕截图并使用 OCR 解析这些屏幕以找出断行的位置（它不应该需要非常准确的 OCR，因为无论如何您都知道原始文本是什么，它本质上是只需要计算空格）。或者，如果文本搜索/选择不是什么大问题，也许只是将屏幕截图嵌入到 PDF 中。

最终手工完成可能是使这项工作最终可靠的唯一方法。

但实际上，这仍然只是错误，任何修改要求的尝试都会更好。继续往上走一步 - 为什么 PDF 必须具有与某些任意浏览器渲染完全相同的参差不齐的边缘？你能以另一种（更好的）方式实现那个目的吗？

【讨论】：

您的建议听起来需要做很多工作——我知道可以在正确的位置添加 BR——这只是使用正确方法的问题。我不确定哪种解决方案将是最快和最好的 Andrej 或 Diodeus - 虽然找到空间坐标很容易，但应该会给出准确的结果。
我担心添加 BR 的另一件事是，当大小发生变化时，您是否能够更新它们。如果用户调整浏览器的大小等，您需要取出之前放入的那些，否则除了浏览器自己的换行符之外，它们还会出现奇怪的不自然换行符。
换行符只添加到保存到服务器的版本中。在客户端，当用户保存小册子时添加换行符，然后在保存完成时删除。

【解决方案3】：

考虑到用户设置的字体大小、MS Windows 可访问性模式和数百种不同的移动设备，这听起来是个坏主意。让浏览器来做这件事——试图对渲染进行精确控制只会让你感到沮丧。

【讨论】：

【解决方案4】：

我认为如果不嵌入 Gecko/WebKit/Trident 或基本上重新创建它们，您将无法以任何准确度做到这一点。

【讨论】：

我在 mo 中使用的方法（移除标记和测量高度）在 80% 的时间内有效，但是我没有时间打磨它。 Diodeus 的建议也是一个很棒的建议，我认为它会很好用 :)

【解决方案5】：

也许是另一种选择：自己完成所有换行符，而不是依赖浏览器。将所有文本放在前置标签中，并添加您自己的换行符。现在至少您不必弄清楚浏览器将它们放在哪里。

【讨论】：

好主意！将不得不尝试这个。