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

102

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

我试过了

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

— 鲁本
source

为什么所有第一行文字缩进都设置为0？另外，我也不知道如何执行此操作，但是此列表中缺少的一项对我来说最有意义，即填充。

— Skarlinski 2013年

211

从字面上看，它只是要缩进的第二行，还是从第二行缩进（即，悬挂的缩进）？

如果是后者，那么遵循此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语法产生不同的效果。

— Redditor
source

3

@Reuben根据您的评论（已被删除），我认为您的意思是从第二行开始-为了将来的访问者，也许这种提琴更好，语法为P而不是div或span。jsfiddle.net/gg9Hx

— redditor

1

为什么要向左填充空白，然后再加上负数文本缩进？为什么必须这样工作？似乎很奇怪。为什么不只是积极text-indent？

— Don Cheadle 2015年

2

文本缩进对跨度没有影响。可以将其从跨度样式中删除以得到相同的结果。

— 山姆·哈斯勒

25

这对我有用：

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

— Xoandre
source

9

这似乎与OP要求的完全相反。@techillage的版本正确。您需要调换负号

— Alex Holsgrove '16

1

这几乎正是我所需要的。接受的答案对我不起作用，因为我在CMS中没有自由以这种方式添加跨度。我在这里的解决方案唯一的问题是，剩余的边距会将整个段落拉到容器的外部。因此，我添加了“ position：relative”和“ left：2em”，它是完美的。与@AlexHolsgrove的评论相反，techillage的回答对我根本不起作用，但这可能是因为我没有在list元素上这样做。

— Stu Furlong

24

左边界：2em左右将把包括第一行在内的整个文本推到右2em。而不是将text-indent（适用于第一行）添加为-2em左右。这使第一行重新开始且没有空白。我尝试过使用列表标签

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

— 葡萄藤
source

2

如果您按列表样式

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

我猜想第二行也可以，但是需要人工思考才能使内容正确流动，当然，硬线中断（本质上不会打扰我）。

— 莫里
source

1

欢迎来到Stackoverflow。看起来您已经解决了这个缩进问题。但是，如果您提供一些标记并说明解决方案，则对每个人都将有很大的帮助。可能是您可以使用jsfiddle.net或其他服务来创建有效的演示。祝一切顺利。

— EGL 2-101

2

我需要缩进两行以允许在para中使用更大的第一个单词。麻烦的一次性解决方案是将文本放置在SVG元素中，并将其放置为与<img>相同。使用float和SVG的height标签定义缩进多少行，例如

<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文本基线的深度，与字体大小相同
页边距允许SVG文本和para文本最佳对齐
在这里使用前两个词来提醒后代需要照顾

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

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

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

— 托尼
source

1

有一个CSS3工作草案，（希望很快）可以让您编写：

p { text-indent: 200px hanging; }

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

— 娜西亚·马克里吉安尼（Nasia Makrygianni）
source