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

Posted 2023-04-14

【中文标题】仅缩进段落中的第一行文本？

【英文标题】：Indenting only the first line of text in a paragraph?

【发布时间】：2011-08-16 22:47:43

【问题描述】：

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

如何使用 CSS 或 html 仅定位第一行？

【问题讨论】：

@Ricardo - 不幸的是没有。将答案标记为 the 答案仅提供给提出问题的人，并且其权力无意改变它。就他们而言，为了其他人遇到问题，这就是投票系统的目的（基本上，投票最多的答案是“社区选择”）。

你为什么不接受答案？这里有几个不错的。

【参考方案1】：

使用text-indent 属性。

p  
   text-indent: 30px;

jsFiddle.

【讨论】：

当我在 Stackoverflwo 上看到对我有帮助的答案时，我感到非常难过，但 OP 不接受它......对不起，兄弟。你活该。

似乎用户停止使用 S.E.在被询问或消失后不到一个月。

@paulotorrens 接受的答案应该是获得最多支持的答案，因为它有助于大多数人，而不仅仅是 OP

@paulortorrens 接受的答案对 OP 选择很好。为什么伤心？这没那么重要。重要的是答案得到了投票，让每个人都清楚这是一个很好且有用的答案。

【参考方案2】：

除了文本缩进之外，如果您希望应用其他样式，还可以使用:first-line 选择器。

p:first-line 
    color:red;


p 
    text-indent:40px;

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

【参考方案3】：

使用 css 非常简单：

p 
    text-indent:10px;

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

【参考方案4】：

我在将段落的第一行（仅第一行）缩进时也遇到了问题，我正在尝试以下代码：

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

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

在 CSS 中：

.indent  text-indent: 30px; 

在html中：

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

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

【讨论】：

第一个不起作用，因为 ::first-line 是一个伪元素，只能应用 CSS 属性的子集。 text-indent 不是其中之一。见developer.mozilla.org/en-US/docs/Web/CSS/::first-line

【参考方案5】：

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

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

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

【讨论】：

这与接受的答案相同，除了在 HTML 标记中添加内联样式的不良做法...

【参考方案6】：

给你：

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

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

【讨论】：

:first-line 不起作用，因为text-indent-property 对其没有影响。没有p 的伪元素，就没有问题。 text-indent-property 无论如何只打算第一行。因此，没有理由一开始就只针对一条线。另见：developer.mozilla.org/en-US/docs/Web/CSS/::first-line 和 developer.mozilla.org/en-US/docs/Web/CSS/text-indent

【参考方案7】：

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

我想在推荐列表中添加一个精美的报价图片，每条报价的开头都是基于 css 背景的图片，图片右侧的文字。由于text-indent 导致所有后续段落缩进，而不仅仅是第一段，我不得不做一些解决方法。但是，如果您不想制作图像，则同样的方法也适用。

我首先在我想要缩进的段落的开头添加一个空 div 来实现这一点。接下来，我对其应用了一个小的宽度和高度来创建不可见的框，最后应用了一个左浮动以使其与文本内联。如果您将其用于图像，请确保在右侧添加边距或将宽度稍宽一些以留出一些空白。

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

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

【参考方案8】：

首先缩进所有行 (1)，然后缩进第一行 (2)

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