CODEWITHSUNDEEP
javascriptjquery
ajitam
ajitam

Reputation: 381

Add chars on line break

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

Upvotes: 3

Views: 315

Answers (4)

andyb
andyb

Reputation: 43823

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 :)

Upvotes: 1

Damp
Damp

Reputation: 3348

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

Upvotes: 0

mattsven
mattsven

Reputation: 23263

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.

Upvotes: 0

user657496
user657496

Reputation:

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!

Upvotes: 1

Related Questions