当前位置:  开发笔记 > 编程语言 > 正文

如何找到浏览器中断文本段落的位置

如何解决《如何找到浏览器中断文本段落的位置》经验,为你挑选了0个好方法。

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

例如:

这是一段非常长的文本\n,它跨越段落中的多行.

这是浏览器选择在\n位置处中断的段落

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

有谁知道任何能够做到这一点的JS库或函数?

到目前为止,我发现的唯一解决方法是从段落中删除令牌并观察clientHeight属性以检测元素高度的变化.我没有时间完成这项工作,并希望找到已经测试过的东西.

编辑: 我需要这样做的原因是我需要准确地将HTML转换为PDF.Acrobat呈现的文本比浏览器更窄.这导致文本在不同位置中断.我需要一个相同的参差不齐的边缘和转换后的PDF中相同数量的线条.

编辑:

@dtsazza:谢谢你的回答.生成一个几乎完全复制HTML的布局编辑器并不是不可能的,我编写了99%的HTML;)

我正在处理的应用程序允许用户通过拖动"瓷砖"来创建产品目录.瓷砖是固定宽度,绝对定位的div包含图像和文本.所有元素都有样式,因此字体大小是固定的.在段落中找到\n的解决方案在80%的时间都是正常的,当它与给定的paragrah一起使用时,生成的PDF与屏幕上的版本非常接近,差异无关紧要.段落高度(与像素相同),图像被高分辨率版本替换,所有位图图稿被生成的服务器端SVG替换.

我的HTML和PDF之间唯一的细微差别是Acrobat略微缩小文本,导致行长度略短.

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

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

如果有人对我正在转换的doc类型感兴趣,那么你可以查看这个屏幕:

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

编辑:非常感谢Diodeus - 你的建议很明显.

解决方案:对于我的情况,将单词换成空格而不是空格更有意义.

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

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

这包含了一个跨度中的每个单词.我现在可以查询文档以获取所有单词,迭代并比较y位置.当y pos改变时添加一个br.

这完美无缺,并给我我需要的结果 - 谢谢!

推荐阅读
个性2402852463
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有