首頁 >web前端 >css教學 >首行縮排怎麼設定

首行縮排怎麼設定

不言原創: 2018-11-12 10:37:4532439瀏覽

首行縮排的設定方法：先建立一個HTML範例檔案；然後在body中定義一些文字內容；最後透過「text-indent」屬性來設定首行縮排效果。

首行縮排怎麼設定

本文操作環境：Windows7系統、Dell G3電腦、HTML5&&CSS3。

這篇文章所說的內容是一個用HTML縮排段落第一行的程式碼，我們要知道縮排段落需要用到的屬性是text-indent，下面我們就來看一看具體的內容。

語法格式：

text-indent :(縮排寬度）

#描述範例：

p {text-indent:1em;}

程式碼範例1：縮排單個字元

透過指定「text-indent：1em」縮排一個字元的段落的開頭。

程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:1em;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
</body>
</html>

（相關推薦：CSS學習手冊）

顯示結果

使用網頁瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。可以確認段落的第一行縮排一個字元。

首行縮排怎麼設定

程式碼範例2：半文字縮排

透過指定“text-indent：0.5 em”，您可以將段落的開頭縮排0.5個字元。

程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:0.5em;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
</body>
</html>

顯示結果

使用網頁瀏覽器顯示上述HTML文件，將顯示如下所示的效果：可以確認該段落的第一行是縮小的。

首行縮排怎麼設定

程式碼範例3：像素規格

透過指定「text - indent：14px」縮排14像素段落的開頭。

程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:14px;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
</body>
</html>

顯示結果

使用網頁瀏覽器顯示上述HTML文件，將顯示如下所示的效果：設定像素數段落的開頭是縮排的。

首行縮排怎麼設定

這篇文章到這裡就全部結束了，有關於CSS的更多內容大家可以關注php中文網的CSS視頻教程欄目！！！

以上是首行縮排怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：::before有什麼作用？ ::before與:before的差別是什麼？下一篇：::before有什麼作用？ ::before與:before的差別是什麼？

看更多