clamp ist eine CSS-Funktion, die bevorzugt als Klammer für die Schriftgröße eingesetzt
wird, um sie stufenlos an den verfügbaren Platz anzupassen – ohne Sprünge an den
Breakpoints.
Per Vorgabe ignorieren Browser aufeinander folgenden Leerzeichen, Tabulatoren und
Zeilenumbrüche (den Weißraum oder Whitespace) im Quelltext von HTML-Seiten.
white-space: pre; | verhält sich wie das HTML-Tag <pre>
white-space: pre-wrap; | Zeilen werden so umgebrochen, wie sie im Quelltext
umgebrochen werden, läuft aber nicht
über die Breite hinaus, die durch width festgelegt ist.
white-space: nowrap; | lässt den Text auf einer Zeile laufen, bis der Text
beendet ist oder ein <br> entdeckt wird
filter: drop-shadow(10px 10px 10px black); | mit dem Schlagschatten
bekommen mehr Objekte als nur Kreis und Rechteck ein Schatten selfhtml/schlagschatten
Es gibt verschiedene Möglichkeiten Text in einem Container auszurichten.
text-align: center; | zum horizontal ausrichten
Werte: left, right, center, justify (richtet Text im Blocksatz aus und fügt
dafür
zusätzlichen Weißraum zwischen Zeichen und Wörter ein) mediaevent/css/text-align
display: grid;
place-items: center; | horizontal und vertikal Zentriert
display: table-cell;
vertical-align:middle;
mit table-cell ändert man ein container in eine
Tabellenzelle, diese kann man dann mit top, middle und bottom vertikal
ausrichten. mediaevent/css/vertical-align
p {
height: 100px;
line-height: 100px;
font-size: 50px;
}
wenn line-height den gleichen Wert hat wie height, dann wird der Text
automatisch vertikal ausgerichtet
padding: 10% 0; | mit padding oben und unten kann man auch
vertikal zentrieren.
word-wrap: break-word; | lange Wörter am rechten Ende des Blocks umbrechen
word-wrap: break-all; | jedes Wort auf eine neue Zeile umbrechen
word-wrap: keep-all; | Chinesisch, Japanisch und Koreanisch wird nicht
umgebrochen
word-break: break-all; | richtet sich an das besondere Verhalten von
chinesischem, japanischen und Koreanischen Text, Funktioniert nur bei
monoserif-Schriften oder Versalien (Großbuchstaben).
<wbr> | das HTML Tag ist ein Vorschlag, wo der Browser ein langes
Wort trennen soll ohne den Trennstrich.
::first-line / ::first-letter
Sie sprechen keine HTML-Elemente der Webseite an, sondern die erste Zeile eines Textes
bzw. den ersten Buchstaben eines Worts. Beide Eigenschaften wirken nur auf
Block-Elemente wie div, p oder h1, sowie auf Elemente, die mit display: block, display:
inline-block, display: table als Block-Elemente dargestellt werden.
Nur ein Teil der CSS-Eigenschaften kann für first-line und first-letter eingesetzt
werden.
Mit shape-outside ziehen Kreise, Rauten und Muster ins Layout von Webseiten und
richtet den Text an der Kontur von Formen aus. Shapes funktionieren nur auf Elementen
mit float. Es gibt fünf Varianten von Formen: circle, ellipse, inset, polygon und url().
Die Empfehlung für einen lesbaren Text lautet: 8 bis 12 Wörter pro Zeile und
nicht viel mehr. Spalten bieten einen Ausweg: Sie packen Text mit kurzen Zeilen in
Blöcke nebeneinander. Mit CSS columns (Spaltensatz) lässt sich Text automatisch von
einer Spalte in die nächsten laufen und gleicht die Höhe der Spalten an. Wenn ein
Spaltensatz für Webseiten eingesetzt wird, dann sollten die nebeneinander liegenden
Spalten kurz genug sein, dass sie ohne Scrollen auf dem Monitor liegen.
Mit der quotes Eigenschaft in CSS können Sie angeben, welche Arten von
Anführungszeichen verwendet werden, wenn diese über ::before {content: open-quote;} oder
::after {content: close-quote;} hinzugefügt werden.