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

我在修改段落的第一行（仅第一行）时遇到问题，并尝试以下代码：

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

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

CSS中的

：

.indent { text-indent: 30px; }

in html：

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

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

Answer 5

你走了：

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

没有看到CSS新手的明确答案，所以这里很简单。

Answer 6

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

r1 = re.compile("^[qwertyuiop]+$")
r2 = re.compile("^[asdfghjkl]+$")
r3 = re.compile("^[zxcvbnm]+$")

r1.match(word) or r2.match(word) or r3.match(word)

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

Answer 7

我遇到了同样的问题，只有我必须使用多个<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>

Answer 8

首先缩进所有行（1），而不是第一行（2）

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

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

8 个答案: