Add chars on line break

Question

Hi I have list (ul) and in it some "li".

With Javascript (jQuery) how do I detect when line breaks and add some chars on beginning.

So for example:

I have a very looooong text in 200px width li.

Result is:

I have a very looooong text 
in 200px width li.

And I want to add " + " on the beginning of new line => result:

I have a very looooong text 
 + in 200px width li.

thx

possible duplicate of [detecting line-breaks with jQuery?](http://stackoverflow.com/questions/4671713/detecting-line-breaks-with-jquery) — Aron Rotteveel, Mar 14 '11 at 20:02
Not gonna post this as an answer because andyb's answer does the job much better for this purpose, but I posted a solution on the duplicate which Aron linked to. — Nathan MacInnes, Sep 16 '11 at 09:04

score 1 · Answer 1 · answered Mar 14 '11 at 20:03

Tough one, here's an idea: Let's make an extra div that is positioned the same place as the li with the same css properties. Give the li a padding-left of 15px. Fill the new div with +'s for each line the li is higher than 1 line.

var plusses = $('li').height() / $('li').css('line-height').slice(0,-2); //number of lines
var i = 1;
var sLines = '<br />';  // the first line doesn't need a + 
while(i < plusses) {
    sLines+='+<br />'; // every other line does
    i++;
}
$('#newdiv').html(sLines);

Then all you need to do is css'ing the bunch!

score 1 · Accepted Answer · answered Mar 14 '11 at 21:37

1

How about something in pure CSS? Demo - http://jsfiddle.net/FDD7n/

Working for me in Chrome 11. This might require some tweaking depending on your font size :)

answered Mar 14 '11 at 21:37

andyb

43,435
12
121
150

nice one, such a simple solution to a difficult problem – Mar 14 '11 at 21:53

score 0 · Answer 3 · edited May 23 '17 at 11:55

If the browser decides to place text on a separate line because the parent's width isn't enough, there is probably no way to detect that. If you yourself are creating the line breaks in your HTML, you could look for "\n" and replace them with "\n+". You could, for example, calculate the text width ( Calculating text width ) and check it against the parent width, although it might not be so easy guessing where the browser decides to break the line.

score 0 · Answer 4 · answered Mar 14 '11 at 20:14

The only way I can think of is (assuming the browser will wrap break on a white-space) wrap all words in a span and then programatically loop through the sibling keeping track of the y pos. If there's a significant change in the y pos, you've probably wrapped... So you add the "+" and keep iterating.

Bear in mind that adding a " + " will probably affect where the remainder of the string is going to wrap as well and can cause an additional line break

Add chars on line break

4 Answers4