Heim > Artikel > Web-Frontend > Wie stelle ich den Einzug der zweiten Zeile eines Absatzes mit CSS ein?

Wie stelle ich den Einzug der zweiten Zeile eines Absatzes mit CSS ein?

WBOYnach vorne: 2023-08-26 21:53:151408Durchsuche

HTML wird verwendet, um die Struktur von Webseiten zu erstellen. Darüber hinaus wird CSS verwendet, um das visuelle Erscheinungsbild dieser Seiten zu gestalten. In CSS ist die Einrückung einer der wichtigen Aspekte der Textformatierung auf einer Webseite. Es ermöglicht Entwicklern, visuelle Effekte am Anfang von Absätzen zu erstellen. Einrückungen können dazu verwendet werden, Text leichter lesbar zu machen und einem Dokument Struktur zu verleihen.

Einrückung in CSS

CSS ist ein leistungsstarkes Tool, mit dem Entwickler die visuelle Darstellung von HTML-Elementen auf einer Webseite steuern können. Wir können Text mit CSS formatieren und seine Schriftart, Größe, Farbe und sogar Einrückung ändern.

In CSS wird Einrückung verwendet, um eine visuelle Trennung zwischen Elementen zu schaffen. Es schafft eine visuelle Trennung zwischen Elementen, indem es auf der linken oder rechten Seite der Elemente Platz oder Polsterung hinzufügt.

Grammatik

css selector {
   text-indent: value;
}

Verwenden Sie die Text-Indent-Eigenschaft, um die erste Zeile einzurücken

CSS ermöglicht Entwicklern, die erste Zeile eines Absatzes mithilfe der text-indent-Eigenschaft einzurücken. Diese Eigenschaft wurde auf 0 gesetzt, was bedeutet, dass diese Eigenschaft keine Einrückung aufweist. Wenn wir beispielsweise alle Absätze auf einer Webseite um 25 Pixel einrücken möchten, könnten wir den folgenden Code verwenden –

p {
   text-indent: 25px;
}

Beispiel 1

Hier ist ein Beispiel für das Festlegen eines 25-Pixel-Einzugs für alle Absätze auf einer Webseite.

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

Wie rückt man die zweite Zeile eines Absatzes ein?

Das Attribut „text-indent“ wird verwendet, um die erste Zeile eines Absatzes einzurücken. Um die zweite Zeile eines Absatzes einzurücken, müssen wir zunächst den Einzug der ersten Zeile entfernen. Dazu können wir die erste Zeile mit einem negativen Wert von „text-indent“ nach links verschieben und danach die zweite Zeile mit einem positiven Wert von „padding-left“ nach rechts verschieben. Zum Beispiel -

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

Im obigen Code rücken wir die erste Zeile des Absatzes um -20 Pixel ein, wodurch er um -20 Pixel nach links verschoben wird, und die zweite Zeile um 20 Pixel, wodurch er wieder nach rechts verschoben wird.

Sehen wir uns einige Beispiele für das Einrücken der zweiten Zeile eines Absatzes mithilfe von CSS an.

Beispiel 2

Dies ist ein Beispiel für das Festlegen des Einzugs der zweiten Zeile eines Absatzes mithilfe von CSS-Elementen

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

Beispiel 3

Hier ist ein Beispiel für die Verwendung von CSS-Klassenselektoren zum Festlegen des Einzugs der zweiten Zeile eines Absatzes.

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

Fazit

Hier besprechen wir den Einzug der zweiten Zeile eines Absatzes. Dies ist eine einfache Möglichkeit, die Lesbarkeit und das Erscheinungsbild Ihrer Webseiten zu verbessern. Durch die Verwendung des Attributs „text-indent“ können wir einen einzigartigen und optisch ansprechenden Look schaffen, der den Inhalt hervorhebt.

Das obige ist der detaillierte Inhalt vonWie stelle ich den Einzug der zweiten Zeile eines Absatzes mit CSS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verwende ich Flexbox-Elemente in CSS?Nächster Artikel：Wie verwende ich Flexbox-Elemente in CSS?

In Verbindung stehende Artikel

Mehr sehen