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

WBOY 转载: 2023-08-26 21:53:15 654浏览

如何使用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>