僅縮進段落中的第一行文字？

我有幾個段落，我想縮進，但只有這些段落的第一行。僅縮進段落中的第一行文字？

我該如何定位使用CSS或HTML的第一行？

2011-05-02 Miles Henrichs

@Ricardo - 不幸的不是。將答案標記爲*答案僅針對提出問題的人，以及無意改變該問題的權力。就他們而言，爲了別人解決問題，這就是投票系統的意圖（基本上，最高票數的答案就是「社區選擇」）。 – Shauna 2013-02-12 21:06:26

你爲什麼不接受答案？這裏有幾個好的。 – jeremyjjbrown 2014-01-27 05:41:16

130

使用text-indent屬性。

p { 
    text-indent: 30px; 
}

jsFiddle。

來源

2011-05-02 12:11:52 alex

+28

當我在Stackoverflwo上看到一個可以幫助我的答案時，我非常難過，但是OP沒有接受它......對不起，兄弟。你應得的。 – paulotorrens 2013-11-26 18:42:19

似乎用戶停止使用S.E.不到一個月之後，這個問題就被提出或消失了。 – MicroMachine 2017-01-27 20:28:05

很簡單的使用CSS：

p { 
    text-indent:10px; 
}

將在每個段落創建10個像素的壓痕。

來源

2011-05-02 12:13:19

除了文本縮進之外，如果您希望應用其他樣式，則可以使用:first-line選擇器。

p:first-line { 
    color:red; 
} 

p { 
    text-indent:40px; 
}

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

來源

2011-05-02 12:14:43

在這裏你去：

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

沒看到一個CSS新手一個明確的答案，所以這裏是一個容易。

來源

2013-01-07 23:57:38 PaulBGD

'：first-line'不起作用，因爲'text-indent'屬性對它沒有影響。沒有'p'的僞元素，沒有問題。無論如何，'text-indent'屬性只能用於第一行。所以沒有理由首先只瞄準一條線。另見：https：//developer.mozilla.org/en-US/docs/Web/CSS/::first-line和https://developer.mozilla.org/en-US/docs/Web/CSS/text -indent – Erik 2015-06-19 11:26:37

-3

我遇到了同樣的問題，只有我有多個<p>標籤我不得不合作。使用「文本縮進」屬性想要縮進所有的<p>標籤，這不是我想要的。

我想添加一個奇特的報價圖片的證書列表，與基於CSS背景的圖像在每個報價的開頭和文本坐在圖像的右側。由於text-indent導致所有後續段落縮進，而不僅僅是第一段，我不得不做一些解決方法。如果你不想要做一個圖像，同樣的方法適用。

我通過首先將一個空的div添加到我想要縮進的段落開頭來完成此操作。接下來，我爲它創建了一個小寬度和高度來創建不可見的框，最後應用左浮動使其與文本內聯。如果您正在使用此圖像，請確保在右側添加邊距，或者爲某些空白區域增加寬度。

下面是CSS內聯示例。您可以輕鬆地只需要創建一個類，並把它添加到你的CSS文件：

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

來源

2013-02-01 06:12:18 Phil

-3

頭縮進所有行（1），比取消縮進的第一行（2）

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

來源

2013-10-10 11:51:12

我也有問題越來越縮進一個段落（僅第一行）的第一行，並試圖下面的代碼：

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

這沒有奏效。所以，我在CSS創建一個類，並用它在我的HTML如下：

在CSS：

.indent { text-indent: 30px; }

在HTML：

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

這工作就像一個魅力。我仍然不知道爲什麼第一個代碼示例不起作用，並確保文本沒有對齊。

來源

2014-05-23 20:30:59 Wayne

它沒有工作，因爲你添加了冒號 – PaulBGD 2015-05-06 23:35:48

不是「太」冒號，而是「兩個」 – palswim 2015-06-02 17:00:04

第一個不起作用，因爲':: first-line'是一個僞元素，其上只有一個子集可以應用CSS屬性。「文本縮進」不是其中之一。見https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line – Erik 2015-06-19 11:22:51

僅縮進段落中的第一行文字？

回答

相關問題