Textausrichtung, -dekoration und -abstände
Richten Sie Text aus, fügen Sie Unterstreichungen oder Durchstreichungen hinzu und steuern Sie Buchstaben- und Zeilenabstände.
Textausrichtung, -dekoration und -abstände ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
text-align
text-align steuert die horizontale Ausrichtung von Inline-Inhalten innerhalb eines Block-Containers.
<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>
text-align: justify
justify dehnt Zeilen so, dass sie die gesamte Breite des Containers ausfüllen, indem Abstände zwischen Wörtern eingefügt werden. Verwenden Sie es zusammen mit hyphens: auto, um bei schmalen Containern ungünstige Lücken zu vermeiden.
<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>
text-decoration
text-decoration fügt Text Linien hinzu. Es wird häufig verwendet, um Links zu unterstreichen oder gelöschte Inhalte durchzustreichen.
<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>
Langschreibweise von text-decoration
text-decoration ist eine Kurzschreibweise für Linie, Stil, Farbe und Stärke:
<a href="#">Wavy red underline link</a>
text-transform
text-transform ändert die Groß- und Kleinschreibung von Text, ohne das zugrunde liegende HTML zu verändern:
<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>
text-indent
text-indent rückt die erste Zeile eines Blockelements ein. Verwenden Sie zusammen mit einem entsprechenden Innenabstand einen negativen Wert, um Text barrierefrei auszublenden (Bilderersetzung).
<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>
white-space
white-space steuert, wie Leerraum und Zeilenumbrüche im HTML-Quelltext verarbeitet werden:
normal– Leerraum zusammenfassen, an Wörtern umbrechennowrap– Zeilenumbruch verhindernpre– Leerraum beibehalten, kein Zeilenumbruchpre-wrap– Leerraum beibehalten, Zeilenumbruch erlauben
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
return true;
}</pre>
letter-spacing
letter-spacing legt zusätzlichen Abstand zwischen Zeichen fest. Positive Werte vergrößern den Abstand zwischen Glyphen, negative Werte verringern ihn. Verwenden Sie em für eine proportionale Skalierung.
<p class="spaced">spaced heading text</p>
word-spacing
word-spacing fügt zusätzlichen Abstand zwischen Wörtern ein. Es wird selten benötigt, ist aber für die Feinabstimmung von Blocksatz oder für große Überschriften nützlich.
<h1>Word Spaced Heading Example</h1>
text-overflow: ellipsis
Kürzen Sie überlaufenden Text mit einer Ellipse. Dafür sind overflow: hidden und white-space: nowrap erforderlich.
<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>
Vertikaler Text mit writing-mode
writing-mode dreht die Richtung des Textflusses. Zusammen mit text-orientation ermöglicht es vertikale CJK-Typografie oder kreativ gedrehte Beschriftungen.
<div class="label">Vertical Label Text</div>
Kurztest
Welche drei Eigenschaften sind erforderlich, um bei überlaufendem Text eine Ellipse anzuzeigen?
Zusammenfassung
text-align positioniert Inline-Inhalte in ihrem Container. text-decoration fügt Linien hinzu oder entfernt sie. text-transform ändert die Groß- und Kleinschreibung. white-space: nowrap + overflow: hidden + text-overflow: ellipsis ist das klassische Rezept zum Kürzen von Text.
Häufig gestellte Fragen
Ist die Lektion „Textausrichtung, -dekoration und -abstände“ kostenlos?
Ja — der vollständige Text von „Textausrichtung, -dekoration und -abstände“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Textausrichtung, -dekoration und -abstände“?
Richten Sie Text aus, fügen Sie Unterstreichungen oder Durchstreichungen hinzu und steuern Sie Buchstaben- und Zeilenabstände. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Textausrichtung, -dekoration und -abstände“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Schriftfamilien und websichere Schriften
- Schriftgröße, -stärke und -stil
- Textausrichtung, -dekoration und -abstände
- Google Fonts und @font-face