How about this:
1. Get the dimensions of the whole text node* 2. Create a <span class="line-wrapper"> around the first character in the text node, and get it's dimensions 3. Stop if you only have one line 4. Get the dimensions of the new text node which follows your span (i.e. everything except the first character) 5. If the new dimensions have not changed, you aren't at the end of a line yet, so pull another character into the span 6. When the dimensions of the following text node have changed, you now have a complete line in your span - go to step 2 * like this: http://stackoverflow.com/questions/6961022/measure-bounding-box-of-text-node-in-javascript Sorry, not brilliantly well explained, but hopefully you get the idea. Note that since you're munging the DOM, you might want to be careful about things like events. Note that this will also be really poor since it will cause at least one browser repaint per character. On 10 January 2012 19:53, Scott Sauyet <scott.sau...@gmail.com> wrote: > Mark McDonnell wrote: > > Does any one know how to check when a single line of text has been > rendered > > on two lines? > > I have one really ugly suggestion. If this is an essential > requirement, and not something that can be handled with CSS's ":first- > line" pseudo-selector, then you might want to try this. But it's > definitely not something I would enjoy trying. > > The technique assumes that you have your line of text wrapped in an > element. For a first pass, prepend the content of the element with an > empty SPAN, and record the y-position of that SPAN. Then move the > span one character at a time to the right, until you get to the end or > until the SPAN has a greater y-position than it started with. > Presumably the preceding character would be the first one on the new > line. Obviously you could increase performance by moving word-by- > word, and still more for longer strings by doing a binary search for > the correct position. > > Thus, > > <span id="x">My very seriously long sentence here (y-pos: 372) > M<span id="x">y very seriously long sentence here (y-pos: 372) > My<span id="x"> very seriously long sentence here (y-pos: 372) > ... > My very seriously long <span id="x">sentence here (y-pos: 372) > My very seriously long s<span id="x">entence here (y-pos: 388) > > The first split would be between "My very seriously long " and > "sentence here". > > If these are long strings, a binary search would clearly perform > better, but would be even uglier to implement. > > Of course you would have to redo this on any reflow of the element. > > What is the use-case for this? > > -- Scott > > -- > To view archived discussions from the original JSMentors Mailman list: > http://www.mail-archive.com/jsmentors@jsmentors.com/ > > To search via a non-Google archive, visit here: > http://www.mail-archive.com/jsmentors@googlegroups.com/ > > To unsubscribe from this group, send email to > jsmentors+unsubscr...@googlegroups.com > -- Pete Otaqui p...@otaqui.com +44 7949 945542 -- To view archived discussions from the original JSMentors Mailman list: http://www.mail-archive.com/jsmentors@jsmentors.com/ To search via a non-Google archive, visit here: http://www.mail-archive.com/jsmentors@googlegroups.com/ To unsubscribe from this group, send email to jsmentors+unsubscr...@googlegroups.com
