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

Answer 5

如果您按样式列出

，则可以“text-align：initial”，后续行将全部缩进。我意识到这可能不适合你的需求，但在我更改标记之前，我正在检查是否有其他解决方案。

我想把第二行放入也会有效，但需要人们思考内容是否正常流动，当然还有强硬的断线（本身并不打扰我）。

Answer 6

我需要缩进两行，以便在para中允许更大的第一个单词。一个繁琐的一次性解决方案是将文本放在SVG元素中，并将其定位为＆lt; img＆gt;。使用float和SVG的高度标记定义了将缩进的行数，例如

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
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.</p>

SVG的高度和宽度确定区域被阻挡。
Y = 36是SVG文本基线的深度，与font-size
margin-top允许最好地对齐SVG文本和段落文本
在这里使用前两个词来提醒下降者所需的护理

是的，它很麻烦，但它也与包含div的宽度无关。

上面的答案是我自己的查询，允许para的第一个单词更大并且位于两行之上。要简单地缩进para的前两行，您可以使用以下单个像素img替换所有SVG标记：

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />

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

6 个答案: