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/

Answer 2

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:

<?php
$str= "This is what I want to achieve with your help";
$str = strrev($str);
$exp = str_split($str,18);
$str = implode(">rb<", $exp);
echo strrev($str);
?>

Answer 3

6 years later, but fret not! I have found a pure CSS solution!

Turns out you can achieve this result with flexbox, but it's not obvious or very straight forward. This is what I started out with:

I want the header to be "bottom-heavy", the same effect as you describe in the question.

I began by splitting up my string by whitespace and giving them each a <span> parent. By using flex-wrap: wrap-reverse, and align-content: flex-start. You will achieve this:

Oh no! Now the order is messed up! Here comes the trick. By reversing both the order in which you add spans to the HTML and the direction order of flex with 'flex-direction: row-reverse', you actually achieve the "pyramid-shaped" upwards overflow effect you desire.

Here is my (simplified) code, using react and react-bootstrap:

        <Row className='d-flex flex-wrap-reverse flex-row-reverse align-content-start'>
          {props.deck.name
            .split(' ')
            .reverse()
            .map(word => (
              <span className='mr-1'>{word}</span>
            ))}
        </Row>