如何使用CSS設定段落第二行縮排？-css教學-PHP中文網

如何使用CSS設定段落第二行縮排？

WBOY

發布： 2023-08-26 21:53:15

轉載

1482 人瀏覽過

如何使用CSS設定段落第二行縮排？

HTML 用來建立網頁的結構。此外，CSS 用於設計這些頁面的視覺外觀。在 CSS 中，縮排是網頁上文字格式的重要面向之一。它允許開發人員在段落開頭創建視覺效果。縮排可用於使文字更易於閱讀並在文件中創建結構感。

CSS 中的縮排

CSS 是一個功能強大的工具，可讓開發人員控制網頁上 HTML 元素的視覺呈現。我們可以使用 CSS 設定文字樣式，並更改其字體、大小、顏色，甚至縮排。

在 CSS 中，縮排用於在元素之間建立視覺分隔。它透過在元素的左側或右側添加空間或填充來在元素之間創建視覺分隔。

文法

css selector {
   text-indent: value;
}

登入後複製

使用 Text-Indent 屬性進行首行縮排

CSS 允許開發人員使用 text-indent 屬性縮排段落的第一行。該屬性已設為 0，這表示該屬性上沒有縮排。例如，如果我們想要將網頁上的所有段落縮排 25 像素，我們可以使用以下程式碼 -

p {
   text-indent: 25px;
}

登入後複製

範例 1

以下是為網頁上所有段落設定 25px 縮排的範例。

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: center;
      }
      p {
         text-indent: 35px;
      }
   </style>
</head>
<body>
   <h2>This is an example of a text-indent property</h2>
   <p>This is the first indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
   <p>This is a second indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
   <p>This is the nth indented paragraph, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>

登入後複製

如何縮排第二行段落？

“text-indent”屬性用於縮排段落的第一行。要縮排段落的第二行，首先我們必須刪除第一行的縮排。為此，我們可以使用「text-indent」的負值將第一行向左移動，之後，我們使用「padding-left」的正值將第二行向右移動。例如 -

p {
   text-indent: -20px;
   padding-left: 20px;
}

登入後複製

在上面的程式碼中，我們將段落的第一行縮排 -20px，這會將其向左移動 -20px，而第二行縮排 20px，這會將其移回右側。

讓我們來看一些使用 CSS 縮排段落第二行的範例。

範例 2

這是一個使用CSS元素設定Paragraph第二行縮排的範例

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: center;
      }
      p {
         text-indent: -30px;
         padding-left: 30px;
      }
   </style>
</head>
<body>
   <h2>Indent Second Line of Paragraph</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>

登入後複製

範例 3

以下是使用 CSS 類別選擇器設定段落第二行縮排的範例。

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: center;
      }
      .indent-p {
         text-indent: -4em;
         padding-left: 4em;
      }
   </style>
</head>
<body>
   <h2>Indent Second Line of Paragraph using CSS class selector</h2>
   <p class="indent-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>

登入後複製