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-line
selector 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-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>
回答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) */