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

Question

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

136

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

我已经尝试过

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

- Reuben

为什么你所有的首行文本缩进都设置为0？此外，我不知道如何做到这一点，但是在这个列表中缺少的那个对我来说最有意义，那就是填充。 - Skarlinski

6个回答

31

这对我起作用：

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

- xoandre

12

这似乎完全相反于OP所要求的。@techillage的版本是正确的。你需要交换减号的位置。 - Alexander Holsgrove

1

这几乎就是我需要的。接受的答案对我来说行不通，因为我在我的CMS中没有自由添加那样的跨度。我对这里的解决方案唯一的问题是，左边距会将整个段落拉出容器。所以我添加了“position:relative”和“left:2em”，现在完美了。与@AlexHolsgrove的评论相反，techillage的答案根本不适用于我，但可能是因为我没有在列表元素上执行此操作。 - Stu Furlong

28

将左边距设置为2em或类似值将把整个文本（包括第一行）向右推动2em。然后添加text-indent（仅适用于第一行），设为-2em或类似值。这将使第一行回到没有缩进的起点，同时不改变左边距。

我已尝试过在列表标签中应用此方法。

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

- vineetma

6

有一个CSS3工作草案，希望能够让你只写:

p { text-indent: 200px hanging; }

注意： https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-indent

- Nasia Makrygianni

1

2023年了，仍然没有支持，但除此之外本来是完美的... https://caniuse.com/mdn-css_properties_text-indent_hanging - EvilDr

2

我需要缩进两行，以便允许段落中的第一个单词更大。一个繁琐的一次性解决方案是将文本放置在SVG元素中，并将其定位为与<img>相同。使用浮动和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文本基线的深度，与字体大小相同。
margin-top可以使SVG文本和段落文本对齐。
在这里使用前两个单词来提醒需要注意下降字符。

是的，这很繁琐，但它也不受包含div的宽度的影响。

上面的回答是针对我的问题，允许段落的第一个单词（或几个单词）更大并跨越两行。如果只需缩进段落的前两行，则可以将所有SVG标签替换为以下单像素img：

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

- Tony

1

如果您将样式设置为列表

，则可以使用"text-align: initial"，随后的所有行都会缩进。我意识到这可能不适合您的需求，但在更改我的标记之前，我正在检查是否有其他解决方案。

我猜将第二行放入

标签中也可以起到同样的效果，但需要人工思考以使内容正确流动，并且需要硬换行符（这本身并不困扰我）。

- morrie

1

欢迎来到Stackoverflow。看起来你对这个缩进问题有一些解决方案。然而，如果你提供一些标记并解释解决方案，那将对每个人都是极大的帮助。也许你可以使用jsfiddle.net或其他服务创建一个工作演示。祝一切顺利。 - EGL 2-101

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- redditor · Accepted Answer

您是只想缩进第二行还是从第二行开始缩进（即悬挂缩进）？

如果是后者，可以参考类似这个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语法会产生不同的效果。