css - 与缩进右对齐

Question

我有必须右对齐的文本，当该文本占用多行并环绕时，新行必须与后面的行区分开来，所以我试图让它缩进右侧，但我找不到有效的解决方案。

我已经尝试了 [htmlhelp 论坛线程 #8327] 和 [codingforums 线程 #58451] 上的建议，以及两者的组合都无济于事(无法发布链接。抱歉。)。有没有其他方法可以做到这一点？

我的尝试:

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

做某事，但如果文本只占一行，我不希望它缩进。

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

什么都不做

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

第一行的文本变成红色(这样我就知道发生了什么)但是边距和填充没有任何作用。

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

给你:

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

这会将 css 方向设置为从右到左。然后添加右填充以从右侧缩进整个内容然后使用导致第一行“缩进”的负缩进

您的内容和文本流仍然是从左到右(即在右侧中断)，它只是解释另一侧的 css(例如段落文本缩进)。

这是我的代码:

http://jsbin.com/ukese5/7