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

我有几个段落，我想缩进，但只有这些段落的第一行。仅缩进段落中的第一行文字？

我该如何定位使用CSS或HTML的第一行？

2011-05-02 Miles Henrichs

@Ricardo - 不幸的不是。将答案标记为*答案仅针对提出问题的人，以及无意改变该问题的权力。就他们而言，为了别人解决问题，这就是投票系统的意图（基本上，最高票数的答案就是“社区选择”）。 – Shauna 2013-02-12 21:06:26

你为什么不接受答案？这里有几个好的。 – jeremyjjbrown 2014-01-27 05:41:16

130

使用text-indent属性。

p { 
    text-indent: 30px; 
}

jsFiddle。

来源

2011-05-02 12:11:52 alex

+28

当我在Stackoverflwo上看到一个可以帮助我的答案时，我非常难过，但是OP没有接受它......对不起，兄弟。你应得的。 – paulotorrens 2013-11-26 18:42:19

似乎用户停止使用S.E.不到一个月之后，这个问题就被提出或消失了。 – MicroMachine 2017-01-27 20:28:05

很简单的使用CSS：

p { 
    text-indent:10px; 
}

将在每个段落创建10个像素的压痕。

来源

2011-05-02 12:13:19

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

p:first-line { 
    color:red; 
} 

p { 
    text-indent:40px; 
}

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

来源

2011-05-02 12:14:43

在这里你去：

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

没看到一个CSS新手一个明确的答案，所以这里是一个容易。

来源

2013-01-07 23:57:38 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 2015-06-19 11:26:37

-3

我遇到了同样的问题，只有我有多个<p>标签我不得不合作。使用“文本缩进”属性想要缩进所有的<p>标签，这不是我想要的。

我想添加一个奇特的报价图片的证书列表，与基于CSS背景的图像在每个报价的开头和文本坐在图像的右侧。由于text-indent导致所有后续段落缩进，而不仅仅是第一段，我不得不做一些解决方法。如果你不想要做一个图像，同样的方法适用。

我通过首先将一个空的div添加到我想要缩进的段落开头来完成此操作。接下来，我为它创建了一个小宽度和高度来创建不可见的框，最后应用左浮动使其与文本内联。如果您正在使用此图像，请确保在右侧添加边距，或者为某些空白区域增加宽度。

下面是CSS内联示例。您可以轻松地只需要创建一个类，并把它添加到你的CSS文件：

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

来源

2013-02-01 06:12:18 Phil

-3

头缩进所有行（1），比取消缩进的第一行（2）

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

来源

2013-10-10 11:51:12

我也有问题越来越缩进一个段落（仅第一行）的第一行，并试图下面的代码：

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

这没有奏效。所以，我在CSS创建一个类，并用它在我的HTML如下：

在CSS：

.indent { text-indent: 30px; }

在HTML：

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

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

来源

2014-05-23 20:30:59 Wayne

它没有工作，因为你添加了冒号 – PaulBGD 2015-05-06 23:35:48

不是“太”冒号，而是“两个” – palswim 2015-06-02 17:00:04

第一个不起作用，因为':: first-line'是一个伪元素，其上只有一个子集可以应用CSS属性。 “文本缩进”不是其中之一。见https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line – Erik 2015-06-19 11:22:51

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

回答

相关问题