Textausrichtung
Die Schachmeister der Worte
Die Textausrichtung, Silbentrennung und Trennlinie sind wie die Züge eines meisterhaften Schachspiels, bei dem jedes Wort strategisch platziert ist. Links ausgerichtet, wie der verlässliche Bauer, steht die Standardausrichtung fest an ihrer Position. Zentriert, wie der König im Fokus des Spielfelds, zieht es alle Blicke auf sich. Rechts ausgerichtet, wie die elegante Dame, setzt es gekonnt Akzente am Rande des Textes.
Die Silbentrennung gleicht dem Springer, der mit Geschick Lücken überspringt und fließende Lesbarkeit schafft. Und dann ist da noch die Trennlinie, der Turm, der Abschnitte fest abgrenzt und für klare Strukturen sorgt. Mit diesen Zügen in deinem Repertoire wird dein Text nicht nur harmonisch, sondern auch taktisch ein wahres Meisterwerk.
Perfekte Textanordnung
Ausrichten, trennen, balancieren – damit dein Text immer gut aussieht.
Ausrichtung
Die Anordnung der Worte
Die Textausrichtung ist die Dirigentin deiner Worte. Links ausgerichtet bietet sie eine solide Grundlage, rechtsbündig weht ein Hauch von Kreativität, und zentriert verleiht deinen Zeilen eine Aura von Autorität und Bedeutung.
h1 {
text-align: center;
}Diese Eigenschaft weist Texten Positionen zu. Der Wert left (Standard) für linksbündig, center für zentriert und right für rechtsbündig.
Blocksatz
Worte in geschlossener Formation
Im Blocksatz marschieren die Worte in per-fekter Formation, links wie rechts. Diese strenge, ordentliche Ausrichtung schafft einen formalen, respektvollen Eindruck, bei dem kein Wort aus der Reihe tanzt.
p {
text-align: justify;
}deine Texte werden jetzt als Blocksatz dargestellt.
Silbentrennung
Die Atempausen der Worte
Die Silbentrennung sorgt dafür, dass lange Worte in handliche Stücke zerlegt werden. Wie ein Durchatmen beim Laufen, hilft sie, den Lesefluss zu bewahren und unschöne Lücken im Text zu vermeiden.
p {
hyphens: auto;
}hyphens erlaubt die Silbentrennung, die im HTML-Tag eine Sprache im Attribut erfordert, z.B. html lang=“de“.
Trennlinie
Die stilvolle Grenze
Mit CSS verwandelst du das bescheidene <hr>-Element in eine elegante Linie, die wie eine unsichtbare Barriere deine Abschnitte trennt. Du kannst Farbe, Dicke und Stil ganz nach deinem Geschmack anpassen und so deiner Seite einen Hauch von Tiefe und Struktur verleihen.
hr {
border: none;
height: 20px;
background-color: red;
}border: none; entfernt den Standardrahmen. height: 2px; legt die Höhe der Linie fest. background-color: #333; ändert die Farbe der Linie.
Textumbruch und Balance
Harmonische Textgestaltung
Mit text-wrap: balance; verteilt sich dein Text anmutig über mehrere Zeilen, was für eine ausgewogene Darstellung sorgt. Doch wenn du es hübsch und fließend magst, nimmst du text-wrap: pretty;. Es verhindert einsame Waisenwörter, die allein in einer Zeile stehen, und sorgt für einen eleganten, kontinuierlichen Textfluss.
.balance {
text-wrap: balance;
}
.pretty {
text-wrap: pretty;
}Während balance den Text gleichmäßig über mehrere Zeilen verteilt, sorgt pretty dafür, dass der Text flüssig bleibt und keine einzelnen Wörter am Ende einer Zeile stehen. Allerdings gibt es für pretty noch wenig Browsersupport.
In dieser Lektion hast du gelernt…
- Wie du mit
text-alignTexte ausrichtest, um sie linksbündig, zentriert, rechtsbündig oder im Blocksatz darzustellen. - Warum
hyphens: autofür Silbentrennung sorgt, um unschöne Lücken in Blocksatz-Texten zu vermeiden. - Wie du mit
hrund CSS eine stilvolle Trennlinie gestaltest, um Abschnitte elegant voneinander abzugrenzen. - Warum
text-wrap: balanceundtext-wrap: prettyhelfen, um Text harmonisch zu verteilen und unschöne Umbrüche zu vermeiden.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Pfade der Worte
In Greenwood Hollow gibt es Schriftrollen, die sich selbst umdrehen, fließen und sich ausrichten, als wären sie in ständiger Diskussion darüber, wo sie eigentlich hinwollen. Um die mystischen Inschriften zu entziffern, musst du den Text bändigen, damit er sich nicht einfach in alle Richtungen verläuft. Stelle sicher, dass deine Zeilen schön ausgerichtet sind, und lass sie wie ein geordnetes Märchen in einer geraden Linie tanzen. Mit CSS kannst du den Text zähmen, die Pfade der Worte öffnen und verhindern, dass sie einfach im Chaos verschwinden.
Deine Aufgabe: Wende Textausrichtung und Silbentrennung an
- Erstelle einen Stil für die Klasse container:
der Container soll maximal 400px (max-width) breit sein und sich zentrieren mit margin: 0 auto;. - Textausrichtung (text-align):
Setze für die .left-align, .center-align, und .justify-text-Klassen die Eigenschaften left, center, und justify. - Silbentrennung (hyphens):
Füge für die .hyphenated-Klasse die Eigenschaft hyphens: auto hinzu, um die Silbentrennung basierend auf der im head-Bereich definierten Sprache zu aktivieren. - Trennlinie gestalten:
Setze für die Klasse .divider eine border: none, height: 20px, und eine background-color wie darkgreen ein, um die Linie visuell abzugrenzen. - Textumbruch und -balance:
Experimentiere mit den Eigenschaften text-wrap: pretty,
text-wrap: balance, und text-wrap: normal.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
.container {
max-width: 400px;
margin: 0 auto;
}
/* Left-align ist unnötig, da Standard */
.center-align {
text-align: center;
}
.right-align {
text-align: right;
}
.balance {
text-wrap: balance;
}
.justify-text {
text-align: justify;
}
.hyphenated {
hyphens: auto;
}
hr {
border: none;
height: 20px;
background-color: darkgreen;
}