Anybody know how I could wrap the text in reverse order, from bottom to top? I attached an example image.
P.S. refined question: Instead of breaking the line after it is full and having an incomplete line at the end... I need to brake somehow from bottom to top, so bottom lines are full and top line is incomplete.
If you already know where you want your breaks to take place just use simple HTML breaks to break your content and have it display the way you want.
If you set the breaks manually (and you know where you want them to break) then create them yourself.
You could also try setting separate css width adjustments based on the dimensions of the screen you are seeing the breaking you are not liking and set an @media reference to make the div width smaller to break the text so it doesn't run unevenly across the top of certain size devices.
There is no general css solution for it. You must have to utilize help of any language. This is one of the solution using PHP:
I would not recommend using exotic CSS attributes which aren't even in Chrome & Firefox yet. The best cross-browser solution is to handle this in Javascript when the document loads. Here's a sketch of how to do that:
Working JSFiddle is here: http://jsfiddle.net/zephod/hfuu3m49/1/
Wrap and Nowrap will be rendered by the client-browser, so you can not force the browser to wrap from bottom to top. but you can do that with javascript or asp.
This is not a formal solution for this problem. But see if this helps.
The HTML CODE
CSS:
Here setting the div width around 50 times that of the font-size will give you the precise result. Other width values or font values might slightly disorient the last line, giving some blank space after the last character.(Could not solve that part, yet).
JQuery:
Well, if that is depending on the text, then you can try something like a word replacer. For example
Here is a fiddle for you: http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/
Otherwise, I don't think you can break a line depending on number of characters in a line.