Html 仅缩进段落中的第一行文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5856952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Indenting only the first line of text in a paragraph?
提问by Miles Henrichs
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 仅定位第一行？
回答by alex
回答by Wesley Murch
In addition to text-indent, you can use the :first-lineselector if you wish to apply additional styles.
除了 text-indent，:first-line如果您希望应用其他样式，还可以使用选择器。
p:first-line {
color:red;
}
p {
text-indent:40px;
}
回答by Shay Ben Moshe
Very simple using css:
使用css非常简单：
p {
text-indent:10px;
}
Will create an indentation of 10 pixels in every paragraph.
将在每个段落中创建一个 10 像素的缩进。
回答by Wayne
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.
这就像一个魅力。我仍然不知道为什么第一个代码示例不起作用，我确实确保文本没有对齐。
回答by PaulBGD
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 新手的明确答案，所以这是一个简单的答案。
回答by Ibrahim Conway
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>
回答by Phil
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.
我遇到了同样的问题，只是我有多个<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-indentwas 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>
回答by Aromapark Media
first indent all lines (1), than outdent the first line (2)
首先缩进所有行 (1)，然后缩进第一行 (2)
padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
