如何使用 CSS 设置段落第二行的缩进?

cssweb developmentfront end technology更新于 2024/3/27 12:28:17

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

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