Die Textausrichtung ist eine häufige Aufgabe im Webdesign. Sie trägt zu einem übersichtlichen und professionellen Layout bei, indem sie den Text am linken und rechten Rand gleichmäßig ausrichtet. In HTML5 erfolgt die Textausrichtung üblicherweise mit CSS (Cascading Style Sheets) und nicht direkt in den HTML-Tags.
Warum Text im Blocksatz ausrichten?
Durch Blocksatz wird ein einheitlicher Textblock erstellt, der am linken und rechten Rand eines Containers ausgerichtet ist, ähnlich wie bei Zeitungs- oder Buchtexten. Diese Methode wird häufig verwendet, um die Ästhetik von Absätzen zu verbessern und den Text übersichtlicher und strukturierter erscheinen zu lassen.
So richten Sie Text mit CSS in HTML5 aus
Sie können Text in HTML5 mithilfe der Textausrichtung Eigenschaft in CSS. Die Textausrichtung Die Eigenschaft steuert die horizontale Ausrichtung von Text innerhalb eines Containers. Um den Text auszurichten, verwenden Sie einfach den Wert rechtfertigen.
So können Sie es machen:
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel für Textausrichtung</title>
<style>
/* CSS to justify the text */ p {
text-align: justify;
}
</style>
</head>
<body>
<h1>So richten Sie Text in HTML5 aus</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Keine Erleichterung. Integer convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui. Nunc sit amet magna nisi. Integer-Autor, auch bekannt als Vulputat. Suspendisse vitae urna eget augue volutpat iaculis non sit amet mi.
</p>
<p>
Aenean tincidunt, arcu nec tincidunt aliquet, nisl risus maximus nunc, sed bibendum risus velit a augue. Curabitur suscipit, lectus id efficitur mollis, metus lectus tincidunt ligula, id luctus magna risus et sapien. Keine Erleichterung. Proin elementum sit amet purus a fermentum. Ut et velit a mi volutpat auctor.
</p>
</body>
</html>
Erläuterung:
- HTML-Struktur:
- Der
<h1>Tag wird für die Überschrift verwendet, und zwei<p>Tags werden für Textabsätze verwendet.
- Der
- CSS:
- Der
Textausrichtung: Blocksatz;Stil wird auf alle angewendet<p>Elemente. Dadurch wird sichergestellt, dass der Text innerhalb dieser Absatz-Tags ausgerichtet ist, d. h., er wird so gestreckt, dass er sowohl am linken als auch am rechten Rand ausgerichtet ist.
- Der
Alternative: Textausrichtung für bestimmte Elemente
Wenn Sie die Ausrichtung nicht auf alle Absätze, sondern nur auf bestimmte anwenden möchten, können Sie eine Klasse oder ID verwenden, um bestimmte Elemente anzusprechen.
Beispiel mit einer Klasse:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel für Textausrichtung</title>
<style>
/* CSS to justify only paragraphs with the class 'justify-text' */ .justify-text {
text-align: justify;
}
</style>
</head>
<body>
<h1>So richten Sie Text in HTML5 aus</h1>
<p class="justify-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Keine Erleichterung. Integer convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui.
</p>
<p>
Dieser Absatz wird nicht im Blocksatz ausgerichtet, da er nicht über die Klasse „justify-text“ verfügt.
</p>
</body>
</html>
In diesem Beispiel wird nur der Absatz mit der Klasse Text ausrichten ist im Blocksatz und der zweite Absatz bleibt linksbündig.
Dinge, die Sie beachten sollten:
- LesbarkeitBlocksatz kann manchmal zu ungleichmäßigen Abständen zwischen Wörtern führen, insbesondere bei kurzen Zeilen. Dies kann die Lesbarkeit beeinträchtigen. Es ist wichtig, den Blocksatz auf verschiedenen Geräten und Bildschirmgrößen zu testen, um eine saubere, lesbare Darstellung zu gewährleisten.
- Silbentrennung: Blocksatz kann auch zu ungünstigen Wortumbrüchen führen. Um die Textdarstellung zu verbessern, können Sie die Silbentrennung in CSS aktivieren, indem Sie die
BindestricheEigenschaft (obwohl nicht alle Browser diese Funktion unterstützen).p { text-align: justify; hyphens: auto; /* Ermöglicht automatische Silbentrennung */} - Alternative Ausrichtungen: Wenn Sie feststellen, dass die Blocksatzausrichtung nicht in allen Fällen gut aussieht, können Sie mit anderen Textausrichtungen experimentieren, wie zum Beispiel
links,Rechts, oderCenter, mithilfe derTextausrichtungEigentum.
Abschluss
Die Textausrichtung in HTML5 lässt sich ganz einfach mit CSS und dem Textausrichtung: Blocksatz; Eigenschaft. Es hilft beim Erstellen sauberer, professionell aussehender Textblöcke, wie sie häufig in Büchern, Zeitungen und Websites zu finden sind. Ob Sie Text auf der gesamten Seite oder nur für bestimmte Elemente ausrichten möchten – CSS bietet eine einfache Möglichkeit, diese Funktion zu implementieren und an Ihre Bedürfnisse anzupassen.
Foto von Lukas
