Wie kann ich Text in CSS einrücken?

CSS-Texteigenschaften definieren das Erscheinungsbild von Text.

Text einrücken

Die erste Zeile eines Absatzes auf einer Webseite einrücken, was einer der am häufigsten verwendeten Textformatierungseffekte ist. (Empfohlenes Lernen: CSS-Einführungs-Tutorial)

CSS bietet das Text-Indent-Attribut, mit dem Texteinrückungen einfach implementiert werden können.

Durch die Verwendung des text-indent-Attributs kann die erste Zeile aller Elemente um eine bestimmte Länge eingerückt werden, sogar um einen negativen Wert.

Die häufigste Verwendung dieses Attributs besteht darin, die erste Zeile eines Absatzes einzurücken. Mit den folgenden Regeln wird die erste Zeile aller Absätze um 5 cm eingerückt:

p {text-indent: 5em;}

Hinweis: Im Allgemeinen kann text-indent auf alle Elemente auf Blockebene angewendet werden, das Attribut kann jedoch nicht auf Inline-Elemente angewendet werden, und das text-indent-Attribut kann auch nicht auf Ersatzelemente wie Bilder angewendet werden. Wenn jedoch ein Element auf Blockebene (z. B. ein Absatz) in der ersten Zeile ein Bild enthält, wird es mit dem Rest des Textes in dieser Zeile verschoben.

Tipp: Wenn Sie die erste Zeile eines Inline-Elements „einrücken“ möchten, können Sie den linken Abstand oder den Rand verwenden, um diesen Effekt zu erzielen.

Negative Werte verwenden

text-indent kann auch auf negative Werte eingestellt werden. Mit dieser Technik können Sie viele interessante Effekte erzielen, wie zum Beispiel einen „hängenden Einzug“, bei dem die erste Zeile links vom Rest des Elements hängt:

p {text-indent: -5em;}

Aber wenn Sie einen negativen Wert für text-indent festlegen , müssen Sie vorsichtig sein, wenn Sie einen negativen Wert für einen Absatz festlegen, kann ein Teil des Textes in der ersten Zeile über den linken Rand des Browserfensters hinausragen. Um dieses Anzeigeproblem zu vermeiden, wird empfohlen, einen zusätzlichen Rand oder etwas Abstand für negative Einrückungen festzulegen:

p {text-indent: -5em; padding-left: 5em;}

Prozentwert verwenden

text-indent funktioniert Verwenden Sie alle Längeneinheiten, einschließlich Prozentwerte.

Der Prozentsatz ist relativ zur Breite des übergeordneten Elements des eingerückten Elements. Mit anderen Worten: Wenn Sie den Einzugswert auf 20 % festlegen, wird die erste Zeile des betroffenen Elements um 20 % der Breite des übergeordneten Elements eingerückt.

Im folgenden Beispiel beträgt der Einzugswert 20 % des übergeordneten Elements oder 100 Pixel:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

Inherited

text-indent-Attribut kann vererbt werden, bitte berücksichtigen Sie das folgende Tag:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

Der Absatz im obigen Tag wird ebenfalls um 50 Pixel eingerückt, da dieser Absatz das div mit erbt die ID von inner Der Einzugswert des Elements.

Das obige ist der detaillierte Inhalt vonWie kann ich Text in CSS einrücken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!