Question

I am looking for a way to separately process the lines in a <div> that are wrapped due to a narrow width. That is, if my text is “Lorem ipsum dolor sit amet lorem \n ipsum dolor sit amet” and it is seen as below:

Lorem ipsum dolor
sit amet lorem
ipsum dolor sit
amet

Then I should be able to encapsulate each ‘line’ in a, say, <span> tag, such as:

<span id=”line0″>Lorem ipsum dolor<span>
<span id=”line1″>sit amet lorem</span>
… etc.

Edit: We can assume that the width and height of the div is fixed and known.

I couldn’t find a proposed solution, if any exists; although there is a good suggestion for counting the lines for a fixed line-height: How to check for # of lines using jQuery

Answer 1

Starting with this:

<div class="narrow">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>

css:

.narrow {
   width:60px;   
}

Insert some placeholders where there are spaces:

$('.narrow').html($('.narrow').html().replace(/ /g,"<span class='count'> </span>")) 

Determine the y-position of each placeholder:

$('.narrow .count') .each(function() {
     var myPos = $(this).position()
     alert(myPos.top)   
}) 

From there you should be able to figure out where the start/end points of each line based on its y-position.