只缩进段落中的第一行文本？

Question

我有几个段落需要缩进，但只是这些段落的第一行。

我应该如何使用CSS或HTML仅选中每个段落的第一行？

- Miles Henrichs

---

抱歉，不行。将答案标记为“答案”仅授予提问者，有关部门没有意图更改这一点。就他们而言，为了其他人能看到这个问题，投票系统就是用来解决这个问题的（顶部得票最高的答案基本上是“社区选择”的答案）。我理解为其他用户提供好评和差评的方式。 - Shauna

为什么不接受一个答案呢？这里有几个很好的答案。 - jeremyjjbrown

Answer 1

使用text-indent属性。

p { 
   text-indent: 30px;
}

jsFiddle。

- alex

---

当我在Stackoverflow看到有人给了我帮助却发现问题提出者没有采纳答案时，我会感到非常难过...抱歉，兄弟。你应该得到认可。 - paulotorrens

似乎用户在此问题发布后不到一个月就停止使用S.E.或消失了。 - MicroMachine

@paulotorrens 接受的答案应该是最高票的答案，因为它有助于大多数人，而不仅仅是提问者。 - Kellen Stuart

@paulotorrens 接受的答案已经很好了，为什么难过呢？这并不是很重要。重要的是这个答案被点赞了，这样大家就清楚知道它是一个好的、有用的答案。 - Quidam

text-indent 在这里是正确的，但是 30px 不是。那是一个任意使用的值。标准化的制表符值是 8 个字符的宽度。这对于在 Web 上使用来说可能太大了，通常情况下变成 4 个空格或 1 个制表符（插入 meme）。无论如何，无论您选择 4 还是 8 个空格，您都应该使用 <length> 数据类型 ch。这将等同于 text-indent: 4ch 或 text-indent: 8ch。 - Travis J

Answer 2

除了text-indent之外，如果您希望应用其他样式，可以使用:first-line选择器。

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

http://jsfiddle.net/Madmartigan/d4aCA/1/

- Wesley Murch

Answer 3

使用 CSS 非常简单：

p {
    text-indent:10px;
}

将在每个段落中创建 10 像素的缩进。

- Shay Ben Moshe

Answer 4

其他人已经提到了通过CSS实现这个最好的方法，但是如果你需要快速修复内联格式问题，只需使用以下代码：

<p style="text-indent: 40px">This text is indented.</p>

来源: https://www.computerhope.com/issues/ch001034.htm

- Ibrahim Conway

---

这与被接受的答案完全相同，只是添加了在HTML标签中嵌入样式的不良实践。 - Jean-François Corbett

@Jean-FrançoisCorbett 在某些情况下是必要的。 - Kumāra Bhikkhu

@Jean-FrançoisCorbett 在某些情况下是必要的。 - Kumāra Bhikkhu

Answer 5

我也遇到了一个问题，就是如何让段落的第一行（只有第一行）缩进，我尝试了以下代码：

p::first-line { text-indent: 30px; }

这种方法没有起作用。因此，我在我的CSS中创建了一个类，并在html中使用它，如下所示：

CSS代码：

.indent { text-indent: 30px; }

在HTML中：

<p class="indent"> paragraph text </p>

这个方法非常有效。我仍然不知道为什么第一个代码示例没有起作用，而且我确保文本没有对齐。

- Wayne

---

第一个方案行不通，因为::first-line是一个伪元素，只能应用其中的一部分CSS属性，而text-indent不在这些属性之列。请参见https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line - Erik

Answer 6

这里是您需要的内容：

p:first-line {
    text-indent:30px;
}

没有看到一个清晰的CSS新手答案，所以这里有一个简单的。

- PaulBGD

---

“:first-line”无效，因为“text-indent”属性对其没有影响。没有“p”伪元素，就没有问题。而且，“text-indent”属性只作用于第一行。所以本身没有必要仅针对其中一行进行目标选择。另请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line和https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent。 - Erik

Answer 7

首先缩进所有行（1），然后取消第一行的缩进（2）

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */

- Aromapark Media

---

这是针对其他行的。对于第一行，只需使用 text-indent。 - Rodrigo

Answer 8

我遇到了同样的问题，只是我需要处理多个<p>标签。使用"text-indent"属性想要缩进所有的<p>标签，但这不是我想要的。

我想在一系列的推荐信中添加一个花哨的引用图片，将css背景图像放置在每个引用的开头，并使文本位于图像的右侧。由于text-indent会导致所有后续段落都缩进，而不仅仅是第一个段落，所以我必须做一些变通。如果您不想使用图片，则可以使用相同的方法。

我首先在我想要缩进的段落开头添加了一个空的div。接下来，我给它应用了一个小的宽度和高度来创建一个不可见的框，并最终应用了左浮动来使其与文本流内联。如果您要使用此功能添加图片，请确保在右侧添加边距或使宽度稍微宽一些以获得一些空白间隔。

以下是带有CSS内联的示例。您可以轻松地创建一个类并将其添加到您的CSS文件中：

<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>

- Phil