121

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

我试过了

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;
}
4

6 回答 6

244

它实际上只是您要缩进的第二行，还是来自第二行（即悬挂缩进）？

如果是后者，则类似于此JSFiddle的内容将是合适的。

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
<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>

<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>

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

于 2013-06-17T23:14:52.327 回答
27

这对我有用：

p { margin-left: -2em; 
 text-indent: 2em 
 }
于 2014-01-24T21:29:45.623 回答
26

Make left-margin: 2em 左右会将包括第一行在内的整个文本向右推2em。比添加 text-indent （适用于第一行）为 -2em 左右。这使第一行重新开始，没有边距。我试过列表标签

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>
于 2014-01-28T10:20:47.713 回答
3

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

p { text-indent: 200px hanging; }

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

于 2020-06-11T15:45:38.270 回答
2

我需要缩进两行以允许段落中的第一个单词更大。一种繁琐的一次性解决方案是将文本放置在 SVG 元素中，并将其定位为与 <img> 相同的位置。使用 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 文本和 para 文本的最佳对齐
  • 这里用前两个词来提醒下属需要注意

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

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

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />
于 2016-06-23T13:40:45.313 回答
1

如果您将样式设置为列表

  • 您可以“文本对齐：初始”，后续行将全部缩进。我意识到这可能不适合您的需求，但是在更改标记之前，我正在检查是否有其他解决方案。

    我想将第二行放入也可以，但需要人类思考才能使内容正常流动，当然还有硬换行（这本身并不困扰我）。

    • 于 2015-02-02T23:02:14.857 回答