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

Question

我想缩进几个段落，尽管只是这些段落的第一行。

如何使用 CSS 或 HTML 只定位第一行？

Answer 1

使用 text-indent 属性。

p { 
   text-indent: 30px;
}

jsFiddle。

Answer 2

除了文本缩进之外，如果您想应用其他样式，还可以使用 :first-line 选择器。

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

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

Answer 3

使用 css 非常简单：

p {
    text-indent:10px;
}

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

Answer 4

其他人提到了通过 CSS 实现此目的的最佳方法，但是如果您需要使用内联格式快速修复，只需使用以下代码：

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

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

Answer 5

我在缩进段落的第一行（仅第一行）时也遇到问题，并尝试使用以下代码：

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

这不起作用。因此，我在 CSS 中创建了一个类，并在 html 中使用它，如下所示：

in CSS:

.indent { text-indent: 30px; }

in html:

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

这就像一个魅力。我仍然不知道为什么第一个代码示例不起作用，并且我确实确保文本未对齐。

Answer 6

给你：

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

对于 CSS 新手来说，没有看到明确的答案，所以这里有一个简单的答案。

Answer 7

首先缩进所有行 (1)，然后缩进第一行 (2)

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

Answer 8

我遇到了同样的问题，只是我必须使用多个

标签。使用“text-indent”属性想要缩进所有

标记，但这不是我想要的。

我想将一个精美的报价图像添加到推荐列表中，每个报价的开头都有基于 CSS 背景的图像，文本位于图像的右侧。由于 text-indent 导致所有后续段落缩进，而不仅仅是第一段，因此我必须采取一些解决方法。如果您不想制作图像，则可以使用相同的方法。

我通过首先在我想要缩进的段落的开头添加一个空 div 来完成此操作。接下来，我对其应用了较小的宽度和高度以创建不可见的框，最后应用了左浮动以使其与文本内联。如果您将其用于图像，请确保在右侧添加边距或将宽度设置得更宽一些以留出一些空白。

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

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