App下載

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

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

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

text-indent 屬性

CSS 的text-indent?屬性是用來設(shè)置文本段落首行縮進(jìn)的。這個(gè)屬性可以被設(shè)置在 div、p 標(biāo)簽下面的文本。其屬性值的單位em?是指無論字體大小,都能自適應(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è)字符用作對比。</p>
    <p id="indent">這一段話將會(huì)被設(shè)置為首行縮進(jìn)兩個(gè)字符。首行縮進(jìn)是為了讓文字顯得有層次,不會(huì)密密麻麻擠作一團(tuán)。我們需要用到text-indent屬性來設(shè)置。具體效果如圖。</p>
</body>
</html>

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

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

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

CSS

0 人點(diǎn)贊