Right-align some text to the right edge of the text above?

Question

I have some lines of text. I want the last one right-aligned so that the text forms a nice column.

This is the sort of thing I want to achieve:

Once upon a midnight dreary, while I pondered, weak and weary,
Over many a quaint and curious volume of forgotten lore,
While I nodded, nearly napping, suddenly there came a tapping,
As of some one gently rapping, rapping at my chamber door.
"'T is some visiter," I muttered, "tapping at my chamber door—
                                 Only this, and nothing more."

Can I tell that last line: "right-align yourself to the right edge of the text above you"?

I would really prefer not to have to give the text a width manually (even in ems), because I don't want the lines to break if the user resizes or changes fonts.

Answer 1

float the element containing the paragraph, float: left the content, and float: right the last line. The floated container will be as wide as the whole paragraph, so right-floating the last line will cause its right edge to line up with the right edge of the preceding text.

Example:

<div style="float: left">
<span style="float: left">
Once upon a midnight dreary, while I pondered, weak and weary,<br/>
Over many a quaint and curious volume of forgotten lore,<br/>
While I nodded, nearly napping, suddenly there came a tapping,<br/>
As of some one gently rapping, rapping at my chamber door.<br/>
"'T is some visiter," I muttered, "tapping at my chamber door—<br/>
</span>
<span style="float: right; clear: left">Only this, and nothing more."</span>
</div>

If you need the whole thing to be centred within its parent container, you can set the topmost to text-align: center and use display: inline-block for the text container. I don't think you need to float it if you use this method:

<div style="text-align: center">
<div style="display: inline-block; text-align: left">
<span style="float: left">
Once upon a midnight dreary, while I pondered, weak and weary,<br/>
Over many a quaint and curious volume of forgotten lore,<br/>
While I nodded, nearly napping, suddenly there came a tapping,<br/>
As of some one gently rapping, rapping at my chamber door.<br/>
"'T is some visiter," I muttered, "tapping at my chamber door—<br/>
</span>
<span style="float: right; clear: both">Only this, and nothing more."</span>
</div>
</div>