我需要在浏览器自然地在文本段落中添加换行符的位置添加换行符.
例如:
这是一段非常长的文本\n,它跨越段落中的多行. p>
这是浏览器选择在\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,' span> ');
text =""+ text +" span>"; //包装第一个和最后一个单词.
这包含了一个跨度中的每个单词.我现在可以查询文档以获取所有单词,迭代并比较y位置.当y pos改变时添加一个br.
这完美无缺,并给我我需要的结果 - 谢谢!