css - Wrap text from bottom to top

Question

Anybody know how I could wrap the text in reverse order, from bottom to top? I attached an example image.

[][http://i.stack.imgur.com/RVsIG.jpg]

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.

Answer 1

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:

$(function() {
    $(".title").each(function(i,title) {
        var width = 0;
        var originalHeight = $(title).height();
        var spacer = $('<div style="float:right;height:1px;"/>').prependTo(title);
        while (originalHeight == $(title).height()) {
            spacer.width( ++width );
        }
        spacer.width( --width );
    });
});

Working JSFiddle is here: http://jsfiddle.net/zephod/hfuu3m49/1/