css – 与缩进对齐

我的文本必须是正确对齐的,当这个文本占用多行并换行时,新行必须与之后的行区分开,所以我试图让它在右侧缩进,但我找不到有效的解决方案.

我已经尝试了[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>

解决方法

干得好：

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

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

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

这是我的代码：

http://jsbin.com/ukese5/7