0

Is there any way to make the previous line of the text always shorter than the next if the text’s length is unknown? Somethig like this:

Lorem ipsum dolor sit amet, consectetur adipiscing
et libero posuere pellentesque. Vivamus quis nulla justo.
vel lacinia sapien scelerisque eget. Vivamus ut velit elit. Donec

There is only a paragraph in HTML.

I have tried to do this with text-indent or :first-line or playing around with padding and width of a paragraph but none of them is working (as expected I think...). Also have tried to somehow calculate the width of line using Calculating text width but also with no result (I'm not very good in jquery...).

I can’t add extra markup on the html (well, not directly, I can add it with scripts if necessary).
Preferably with css but I can add jquery too.

Please help.

Community
  • 1
  • 1
sealla
  • 726
  • 1
  • 9
  • 14
  • You could add a `
    ` tag with jQuery after a certain number of characters (count the characters, then after X number, insert the tag). Then simply add 10 (for example) characters to the counter for each iteration?     – robooneus Aug 26 '13 at 08:45
  • @robooneus That’s a good idea, thanks. I will try to write this code. – sealla Aug 26 '13 at 09:01

1 Answers1

0

Yes, you can just use the selector p and attribute it to the section of there sentence where you want this paragraph to end for and use line-height to adjust its leading for instance http://jsfiddle.net/AMmYR/4/

    p {
        font:14px nor Futura, sans-serif;
        line-height:20px;
        color:#333;
    }

    <p>This is my first sentence.
<br>This is a very, very, very, long sentence
<br>This sentence is longer than the last, I don't know why.</p>
benny
  • 454
  • 2
  • 7
  • 16
  • Then you will need to use the
    selector within different parts of where you want to separate the paragraph. fiddle/code updated.     – benny Aug 26 '13 at 09:02