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

这是一个示例，将在网页上设置所有段落的缩进为25像素。

<!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元素来设置段落的第二行缩进。

<!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>