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

Question

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

我将如何使用 CSS 或 HTML 仅针对第一行？

Answer 1

使用该text-indent物业。

p { 
   text-indent: 30px;
}

js小提琴。

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

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:

in CSS:

.indent { text-indent: 30px; }

in 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.

Answer 5

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:

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

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

Answer 6

干得好：

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

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

Answer 7

我遇到了同样的问题，只是我有多个<p>必须使用的标签。使用“text-indent”属性想要缩进所有<p>标签，这不是我想要的。

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.

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.

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

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

Answer 8

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

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