使用CSS从段落的第二行开始缩进

Question

如何从段落的第二行开始缩进？

我试过了

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

和

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

和

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

Answer 1

它实际上只是你要缩进的第二行,还是来自第二行(即悬挂缩进)？

如果是后者,那么这个JSFiddle的内容就是合适的.

HTML

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
<br/><br/>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

CSS

div {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

span {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

此示例显示如何在DIV或SPAN中使用相同的CSS语法生成不同的效果.

Answer 2

这对我有用:

p { margin-left: -2em; 
 text-indent: 2em 
 }

Answer 3

左边距:2em左右将整个文本包括第一行到右边2em.然后添加文本缩进(适用于第一行)为-2em左右.这使第一行返回开始没有边距.我尝试了列表标签

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>

Answer 4

有一个 CSS3 工作草案（希望很快）允许您编写：

p { text-indent: 200px hanging; }

请关注：https ://developer.mozilla.org/en-US/docs/Web/CSS/text-indent