CSS如何設(shè)置首行縮進(jìn)？附源碼

猿友 2021-05-22 12:06:01 瀏覽數(shù) (5180)

反饋

我們?cè)谶M(jìn)行網(wǎng)頁(yè)的文字開(kāi)發(fā)時(shí)，如果文字過(guò)長(zhǎng)就需要用到首行縮進(jìn)以體現(xiàn)美感。那么 CSS 如何設(shè)置首行縮進(jìn)呢？這篇文章告訴你。

text-indent 屬性

CSS 的text-indent?屬性是用來(lái)設(shè)置文本段落首行縮進(jìn)的。這個(gè)屬性可以被設(shè)置在 div、p 標(biāo)簽下面的文本。其屬性值的單位em?是指無(wú)論字體大小，都能自適應(yīng)縮進(jìn)兩個(gè)字附的空格。如果知道字體大小，也可以直接使用px?作為單位。

具體代碼使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML如何設(shè)置首行縮進(jìn)- 編程獅(w3cschool.cn)</title>
    <style type="text/css">
	#indent{
	    text-indent: 2em;
	}
     </style>
</head>
<body>
    <p>這段話未設(shè)置首行縮進(jìn)兩個(gè)字符用作對(duì)比。</p>
    <p id="indent">這一段話將會(huì)被設(shè)置為首行縮進(jìn)兩個(gè)字符。首行縮進(jìn)是為了讓文字顯得有層次，不會(huì)密密麻麻擠作一團(tuán)。我們需要用到text-indent屬性來(lái)設(shè)置。具體效果如圖。</p>
</body>
</html>

實(shí)現(xiàn)效果如下：

CSS設(shè)置首行縮進(jìn)

以上就是文章“CSS 如何設(shè)置首行縮進(jìn)？附源碼”的全部?jī)?nèi)容。想要了解更多 CSS 學(xué)習(xí)資料請(qǐng)前往 w3cschool。

CSS

0 人點(diǎn)贊