Heim  >  Artikel  >  Web-Frontend  >  So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest

So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest

青灯夜游
青灯夜游Original
2021-02-26 16:35:4821943Durchsuche

In HTML können Sie das Attribut line-height verwenden, um den Abstand zwischen den einzelnen Textzeilen festzulegen. Das Syntaxformat ist „line-height:number|length|%;“. Mit dem Attribut „line-height“ können Sie die Zeilenhöhe festlegen und dann den Zeilenabstand (Abstand zwischen den Zeilen) des Textes anpassen. Je größer der Wert, desto größer der Abstand zwischen den einzelnen Textzeilen.

So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

In HTML können Sie das Attribut line-height verwenden, um den Abstand zwischen den einzelnen Textzeilen festzulegen. Das Attribut „line-height“ kann die Zeilenhöhe festlegen und dadurch den Zeilenabstand von Text anpassen. Je größer der Wert der Zeilenhöhe ist, desto größer ist der Zeilenabstand.

Beispiel:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p{
				font-size: 20px;
				border: 1px solid red;
			}
			.p2 { 
				line-height: 2em;
			}
			.p3 { 
				line-height: 3em;
			}
		</style>

	</head>

	<body>
		<p class="p1">
			桃之夭夭,灼灼其华。之子于归,宜其室家。<br> 
			桃之夭夭,有蕡其实。之子于归,宜其家室。<br> 
			桃之夭夭,其叶蓁蓁。之子于归,宜其家人。
		</p>
		<p class="p2">
			桃之夭夭,灼灼其华。之子于归,宜其室家。<br> 
			桃之夭夭,有蕡其实。之子于归,宜其家室。<br> 
			桃之夭夭,其叶蓁蓁。之子于归,宜其家人。
		</p>
		<p class="p3">
			桃之夭夭,灼灼其华。之子于归,宜其室家。<br> 
			桃之夭夭,有蕡其实。之子于归,宜其家室。<br> 
			桃之夭夭,其叶蓁蓁。之子于归,宜其家人。
		</p>
	</body>

</html>

Rendering

So legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest

line-height-Attribut

line-height-Attribut wirkt sich auf das Layout des Zeilenfelds aus. Wenn es auf ein Element auf Blockebene angewendet wird, definiert es den minimalen Abstand zwischen den Grundlinien in diesem Element und nicht den maximalen Abstand.

Der berechnete Unterschied zwischen Zeilenhöhe und Schriftgröße (in CSS als „Zeilenabstand“ bekannt) wird in zwei Hälften geteilt und am oberen und unteren Rand einer Textzeile hinzugefügt. Die kleinste Box, die diesen Inhalt enthalten kann, ist eine Zeilenbox.

Syntax:

line-height:value;

Mögliche Werte

  • normal: Standard. Stellen Sie einen angemessenen Zeilenabstand ein.

  • Zahl: Legen Sie eine Zahl fest. Diese Zahl wird mit der aktuellen Schriftgröße multipliziert, um den Zeilenabstand festzulegen.

  • Länge: Festen Zeilenabstand festlegen.

  • %: Prozentualer Zeilenabstand basierend auf der aktuellen Schriftgröße.

【Empfohlenes Tutorial: „HTML-Video-Tutorial“】

Das obige ist der detaillierte Inhalt vonSo legen Sie den Abstand zwischen den einzelnen Textzeilen in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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
Vorheriger Artikel:So schatten Sie Text in HTMLNächster Artikel:So schatten Sie Text in HTML