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

I have several paragraphs that I would like to indent, although only the first lines of these paragraphs.

我有几段我想缩进，虽然只是这些段落的第一行。

How would I target just the first lines using CSS or HTML?

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

8 个解决方案

#1

136

Use the text-indent property.

使用text-indent属性。

p { 
   text-indent: 30px;
}

jsFiddle.

的jsfiddle。

#2

In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles.

除了text-indent之外，如果要应用其他样式，还可以使用：first-line selector。

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

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

#3

Very simple using css:

使用css非常简单：

p {
    text-indent:10px;
}

Will create an indentation of 10 pixels in every paragraph.

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

#4

I was also having a problem getting the first line of a paragraph (only the first line) to indent and was trying the following code:

我也有问题得到一个段落的第一行（只有第一行）缩进并尝试以下代码：

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

This did not work. So, I created a class in my CSS and used it in my html as follows:

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

in CSS:

在CSS中：

.indent { text-indent: 30px; }

in html:

在HTML中：

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

This worked like a charm. I still don't know why the first code example did not work and I did make sure that the text was not aligned.

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

#5

Here you go:

干得好：

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

Didn't see a clear answer for a CSS newbie, so here's an easy one.

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

#6

-1

Others have mentioned the best way to implement this via CSS, however if you need a quick fix with inline formatting, simply use the following code:

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

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

Source: https://www.computerhope.com/issues/ch001034.htm

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

#7

-3

I ran into the same issue only I had multiple <p> tags I had to work with. Using the "text-indent" property wanted to indent ALL of the <p> tags and that's not what I wanted.

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

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

标签，这不是我想要的。

I wanted to add a fancy quote image to a list of testimonials, with the css background based image at the very beginning of each quote and the text sitting to the right of the image. Since text-indent was causing all subsequent paragraphs to indent, not just the very first paragraph, I had to do a bit of a workaround. The same method applies if you aren't looking to do an image though.

我想在一个推荐列表中添加一个花哨的报价图像，每个报价的开头都有基于CSS背景的图像，而文本位于图像的右侧。由于text-indent导致所有后续段落缩进，而不仅仅是第一段，我不得不做一些解决方法。如果您不想查看图像，则应用相同的方法。

I accomplished this by first adding an empty div to the beginning of the paragraph I wanted indented. Next I applied a small width and height to it to create the invisible box and finally applied a left float to make it flow inline with the text. If you are using this for an image, make sure to add a margin to the right or make your width a bit wider for some white space.

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

Here's an example with the CSS inline. You can easily just create a class and add it to your CSS file:

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

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

#8

-3

first indent all lines (1), than outdent the first line (2)

首先缩进所有行（1），比第一行缩进（2）

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

#1

136