CSS-Texteinrückung und -abstand

Inhaltsverzeichnis

Textabstand

In diesem Kapitel erfahren Sie mehr über die folgenden Eigenschaften:

text-indent
letter-spacing
line-height
word-spacing
white-space

Texteinzug

Die Eigenschaft text-indent wird verwendet, um den Einzug der ersten Zeile eines Textes anzugeben:

Beispiel

p {
  text-indent: 50px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>

<h1>Using text-indent</h1>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

Buchstaben-Abstand

Die Eigenschaft letter-spacing wird verwendet, um den Abstand zwischen den Zeichen in einem Text anzugeben.

Das folgende Beispiel zeigt, wie der Abstand zwischen Zeichen vergrößert oder verkleinert wird:

Beispiel

h1 {
  letter-spacing: 5px;
}
h2 {
  letter-spacing: -2px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
  letter-spacing: 5px;
}

h3 {
  letter-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using letter-spacing</h1>

<h2>This is heading 1</h2>
<h3>This is heading 2</h3>

</body>
</html>

Zeilenhöhe

Die Eigenschaft line-height wird verwendet, um den Abstand zwischen Zeilen anzugeben:

Beispiel

p.small {
  line-height: 0.8;
}
p.big {
  
line-height: 1.8;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
</style>
</head>
<body>

<h1>Using line-height</h1>

<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

Wortabstand

Die Eigenschaft word-spacing wird verwendet, um den Abstand dazwischen anzugeben die Wörter in einem Text.

Das folgende Beispiel zeigt, wie der Abstand dazwischen vergrößert oder verkleinert wird Wörter:

Beispiel

 p.one {
  word-spacing: 10px;
}
p.two {
  word-spacing: -2px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using word-spacing</h1>

<p>This is a paragraph with normal word spacing.</p>

<p class="one">This is a paragraph with larger word spacing.</p>

<p class="two">This is a paragraph with smaller word spacing.</p>

</body>
</html>

Leerraum

Die Eigenschaft white-space gibt an, wie mit Leerzeichen innerhalb eines Elements umgegangen wird.

Dieses Beispiel zeigt, wie Sie den Textumbruch innerhalb eines Elements deaktivieren:

Beispiel

 p {
  white-space: nowrap;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h1>Using white-space</h1>

<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>

<p>Try to remove the white-space property to see the difference!</p>

</body>
</html>

Die CSS-Textabstandseigenschaften

letter-spacing: Gibt den Abstand zwischen Zeichen in einem Text an
line-height: Gibt die Zeilenhöhe an
text-indent: Gibt den Einzug der ersten Zeile in einem Textblock an
white-space: Gibt an, wie mit Leerzeichen innerhalb eines Elements umgegangen wird
word-spacing: Gibt den Abstand zwischen Wörtern in einem Text an