与缩进对齐

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