Jquery expand <p>-lines with less then 85% Text with word-/letter-spacing to 100%

Question

I want to loop trough a < p > and resize every automatic(!) AND < br > linebreak smaller than eg. 85% but greater 50% only with word-/letter-spacing to 100% width of parent container - if it's not the last line before < p >.

so when i have:

<div width="200px"><p>
This will be displayed in a monospaced font. The first four spaces
will be stripped off, but all other whitespace will preserved.<br />
will be off, but all other whitespace will preserved.<br />
Markdown and HTML are off in code blocks:<br />
This is not italic</i>, [this is not a link](http://example.com)
This is not italic</i>, [this is a link](http://example.com)
End of it.
</p></div>

should be:

...<p>
This will be displayed in a monospaced font. The first four spaces
will  be stripped off, but  all other  whitespace  will  preserved.<br />
will   be   off,  but   all   other   whitespace   will  preserved.<br />
Markdown and HTML are off in code blocks:<br />
This  is not italic</i>,  [this is not  a link](http://example.com)
This   is  not  italic</i>,  [this is  a link] (http://example.com)
End of it.
</p>...

When i use text-align justify no word-spacing is added and i want a "real" justified text. I really searched a lot for days now, but i don't find any code what does what i want.

Maybe someone can help me :)

Answer 1

There is not such thing as "line" in DOM. It means you cannot simply loop through lines in a javascript solution. Maybe you can approximate number of lines for specific font face, but it's not good solution. For "real" justified text you should use text-align: justify;.

Also, I suggest to take a look at answers to this question: Should I avoid using "text-align: justify;"?