如何找到浏览器在哪里中断一段文本 [英] How to find where browser breaks a paragraph of text
问题描述
我需要在浏览器自然在文本段落中添加换行符的位置添加换行符.
例如:
< p>这是一段很长的文本 \ n ，跨越了段落中的许多行.
这是浏览器选择在 \ n
位置处中断的段落我需要找到这个位置并插入一个< br/>
有人知道任何能够执行此操作的JS库或函数吗?
到目前为止，我发现的唯一解决方案是从段落中删除标记，并观察clientHeight属性以检测元素高度的变化.我没有时间完成此操作，想找到已经测试过的东西.
修改: 我需要这样做的原因是我需要将HTML准确地转换为PDF. Acrobat所呈现的文本比浏览器更窄.这样会导致文本在不同位置中断.在转换后的PDF中，我需要相同的参差不齐的边缘和相同数量的行.
@dtsazza:感谢您的深思熟虑.制作几乎可以完全替代我已经编写的HTML的HTML的布局编辑器并不是不可能的；)
我正在使用的应用程序允许用户通过在平铺"上拖动来创建产品目录.磁贴是固定宽度的，包含图像和文本的绝对定位的div.所有元素都有样式，因此字体大小是固定的.我在段落中找到\ n的解决方案在80％的时间内都是可以的，当它与给定的paragrah一起使用时，生成的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-您的建议很明确.
解决方案: 就我的情况而言，将这些字词用spans而不是空格包起来更有意义.
var text = paragraphElement.innerHTML.replace(//g，'</span>< span>');
text =< span>" ++ text +</span>"; //包装首尾两个字.
这会将每个单词包装在一个跨度中.现在，我可以查询文档以获取所有单词，迭代并比较y位置.当pos更改时，添加br.
这完美无瑕，并为我提供了我需要的结果-谢谢！
我建议将所有空格包装在span标签中并找到每个标签的坐标.当Y值更改时，您将进入新行.
I need to add line breaks in the positions that the browser naturally adds a newline in a paragraph of text.
For example:
<p>This is some very long text \n that spans a number of lines in the paragraph.</p>
This is a paragraph that the browser chose to break at the position of the \n
I need to find this position and insert a <br />
Does anyone know of any JS libraries or functions that are able to do this?
The only solutuion that I have found so far is to remove tokens from the paragraph and observe the clientHeight property to detect a change in element height. I don't have time to finish this and would like to find something that's already tested.
Edit: The reason I need to do this is that I need to accurately convert HTML to PDF. Acrobat renders text narrower than the browser does. This results in text that breaks in different positions. I need an identical ragged edge and the same number of lines in the converted PDF.
Edit:
@dtsazza: Thanks for your considered answer. It's not impossible to produce a layout editor that almost exactly replciates HTML I've written 99% of one ;)
The app I'm working on allows a user to create a product catalogue by dragging on 'tiles' The tiles are fixed width, absolutely positioned divs that contain images and text. All elemets are styled so font size is fixed. My solution for finding \n in paragraph is ok 80% of the time and when it works with a given paragrah the resulting PDF is so close to the on-screen version that the differences do not matter. Paragraphs are the same height (to the pixel), images are replaced with high res versions and all bitmap artwork is replaced with SVGs generated server side.
The only slight difference between my HTML and PDF is that Acrobat renderes text slightly more narrowly which results in line slightly shorter line length.
Diodeus's solution of adding span's and finding their coords is a very good one and should give me the location of the BRs. Please remember that the user will never see the HTML with the inserted BRs - these are added so that the PDF conversion produces a paragraph that is exactly the same size.
There are lots of people that seem to think this is impossible. I already have a working app that created extremely accurate HTML->PDF conversion of our docs - I just need a better solution of adding BRs because my solution sometimes misses a BR. BTW when it does work my paragraphs are the same height as the HTML equivalents which is the result we are after.
If anyone is interested in the type of doc i'm converting then you can check ou this screen cast:
http://www.localsa.com.au/brochure/brochure.html
Edit: Many thanks to Diodeus - your suggestion was spot on.
Solution: for my situation it made more sense to wrap the words in spans instead of the spaces.
var text = paragraphElement.innerHTML.replace(/ /g, '</span> <span>');
text = "<span>"+text+"</span>"; //wrap first and last words.
This wraps each word in a span. I can now query the document to get all the words, iterate and compare y position. When y pos changes add a br.
This works flawlessly and gives me the results I need - Thank you!
I would suggest wrapping all spaces in a span tag and finding the coordinates of each tag. When the Y-value changes, you're on a new line.
这篇关于如何找到浏览器在哪里中断一段文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
