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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:21:40  来源:igfitidea点击:

Indenting only the first line of text in a paragraph?

htmlcssindentationtargettext-indent

提问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

Use the text-indentproperty.

使用text-indent物业。

p { 
   text-indent: 30px;
}

jsFiddle.

js小提琴

回答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;
}

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

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

回答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>

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

来源:https: //www.computerhope.com/issues/ch001034.htm

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