Question

I have text which has to be right aligned, and when this text takes up more than one line and wraps around, that new line has to be distinguishable from the line after, so I’m trying to get it to indent on the right side, but I can’t find a solution which works.

I’ve tried what was suggested on [the htmlhelp forums thread #8327] and [codingforums thread #58451] as well as a combination of the two to no avail (Can’t post links. Sorry.). Is there any other way of accomplishing this?

My attempts:

div.poem li:after
{
 content: " ";
 display: inline-block;
 width: 10px; 
}

Does something, but I don’t want it to indent if the text only takes up one line.

div.poem li::first-line::after
{
 content: "asdf";
}

Does nothing

div.poem li:first-line
{
 color: red;
 margin-right: 200px;
 padding-right: 200px;
}

Text on the first line turns red (so that I know what’s going on) but the margin and padding doesn’t do anything.

HTML:

<div class='poem'>
    <ul class='poem'>
        <li>Here's one line of the poem</li>
        <li>This is the second line of the same stanza, which is long and will wrap around</li>
        <li>Part of the line above is now on line 3, and looks like it's supposed to be a line of its own.</li>
    </ul>
</div>

Answer 1

Here you go:

p {direction:rtl;padding-right:100px;text-indent:-100px;}

This sets the css direction to be from right to left.
Then add right padding to indent the whole thing from the right
Then use a negative indent that causes the first line to be “outdented”

Your content and text-flow is still left to right (i.e. breaks on the right), it just interprets the css (e.g. paragraph text-indent) on the other side.

Here’s my code:

http://jsbin.com/ukese5/7