Heim > Web-Frontend > CSS-Tutorial > So rücken Sie einen Absatz in CSS ein

So rücken Sie einen Absatz in CSS ein

青灯夜游
Freigeben: 2021-02-25 11:44:28
Original
7849 Leute haben es durchsucht

In CSS können Sie das text-indent-Attribut verwenden, um einen Textabsatz einzurücken. Sie müssen nur den „text-indent: indent value;“-Stil hinzufügen. Das text-indent-Attribut kann den Einzug der ersten Textzeile im Textblock festlegen und negative Werte zulassen. Wenn der Wert eine negative Zahl ist, bleibt die erste Zeile eingerückt.

So rücken Sie einen Absatz in CSS ein

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS1- und HTML5-Version, Dell G3-Computer.

Tutorial-Empfehlung: CSS-Video-Tutorial

CSS-Absatzeinzug

Wenn Sie den Standardstil des Absatzelements ändern und den Absatz eingerückt machen möchten, können Sie das Attribut text-indent verwenden. Das Attribut

text-indent gibt die Einrückung der ersten Textzeile in einem Textblock an. Negative Werte sind zulässig; wenn der Wert negativ ist, bleibt die erste Zeile eingerückt.

Attributwert:

  • Länge Festen Einzug definieren. Standardwert: 0.

  • % Definiert den Einzug basierend auf einem Prozentsatz der Breite des übergeordneten Elements.

Beispiel:

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p{width: 200px;border: 1px solid red;}
			.text-indent{text-indent:2em;}
		</style>
	</head>
 
	<body>
		<p>测试文本!测试文本!测试文本!测试文本!测试文本!</p>
		<p class="text-indent">测试文本!测试文本!测试文本!测试文本!测试文本!</p>
	</body>
 
</html>
Nach dem Login kopieren

Das p-Element mit der Klasse text-indent wird um die Länge von 2 Schriftarten eingerückt.

Rendering:

So rücken Sie einen Absatz in CSS ein

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierunterricht! !

Das obige ist der detaillierte Inhalt vonSo rücken Sie einen Absatz in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage