
CSS: Formatowanie tekstu
Pozycja, sposób wyświetlania, wcięcia, wielkości, cień, odległości, białe znaki, opływanie.
text-aligntext-align-lasttext-transformtext-decorationtext-decoration-colortext-decoration-styletext-indenttext-shadowletter-spacingword-spacingword-breakwhite-spaceoverflowtext-overflow
text-align – pozycja tekstu
text-align: left; /* do lewej - domyślne */ text-align: center; /* do środka */ text-align: right; /* do prawej */ text-align: justify; /* wyjustowane */
text-align-last – pozycja ostatniej linii paragrafu
text-align-last: right;
text-transform – wielkość znaków
text-transform: uppercase; /* wielkie litery */ text-transform: lowercase; /* małe litery */ text-transform: capitalize; /* wielka pierwsza litera każdego wyrazu */
text-decoration – podkreślenia, przekreślenia tekstu
text-decoration: none; /* brak - domyślne */ text-decoration: overline; /* nadkreślenie */ text-decoration: line-through; /* przekreślenie */ text-decoration: underline; /* podkreślenie */
text-decoration-color – kolor dekoracji tekstu
text-decoration-color: red;
text-decoration-style: – styl dekoracji tekstu
text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy;
text-indent – wcięcie pierwszej linii paragrafu
text-indent: 15px;
text-shadow – cień tekstu
text-shadow: color x y blur-radius;
x – przesunięcie cienia w poziomie /* wymagane */
y – przesunięcie cienia w pionie /* wymagane */
color – kolor cienia /* opcjonalne */
blur-radius – rozmycie (px) /* opcjonalne */
text-shadow: -2px 3px; /* Cień domyślnego koloru (czarny), bez rozmycia, z przesunięciem 2px w lewo, 3px w dół */ text-shadow: #ff0000 2px -3px; /* Cień kloru czerwonego, bez rozmycia, z przesunięciem 2px w prawo, 3px w górę */ text-shadow: #00ff00 2px 2px 3px; /* Cień kloru zielonego, rozmycie 3px, z przesunięciem 2px w prawo, 2px w dół */ text-shadow: 0px 0px 10px; /* Cień domyślnego koloru, rozmycie 10px, bez przesunięcia */
letter-spacing – zmiana odległości pomiędzy literami
letter-spacing: 3px; /* oddalenie od siebie liter o 3 px */ letter-spacing: 0px; /* domyślne */ letter-spacing: -3px; /* przybliżenie do siebie liter o 3 px */
word-spacing – zmiana odległości pomiędzy wyrazami
word-spacing: 3px; /* oddalenie od siebie wyrazów o 3 px */ word-spacing: 0px; /* domyślne */ word-spacing: -3px; /* przybliżenie do siebie wyrazów o 3 px */
word-break – łamanie wyrazów
word-break: normal; word-break: break-all; word-break: keep-all;
white-space – białe znaki
white-space: normal; /* sekwencja białych znaków zamieniona w pojedynczą spację, zawijanie tekstu w razie potrzeby, domyślne */ white-space: nowrap; /* sekwencja białych znaków zamieniona w pojedynczą spację, brak zawijania tekstu, chyba, że użyjemy znacznika nowej linii <br> */ white-space: pre; /* wielokrotne białe znaki pozostają, brak zawijania tekstu, chyba, że użyjemy znacznika nowej linii <br>, zachowanie zbliżone do znacznika <pre> */ white-space: pre-line; /* sekwencja białych znaków zamieniona w pojedynczą spację, zawijanie tekstu w razie potrzeby oraz przy użyciu znacznika nowej linii <br> */ white-space: pre-wrap; /* wielokrotne białe znaki pozostają, zawijanie tekstu w razie potrzeby oraz przy użyciu znacznika nowej linii <br> */
consectetur adipiscing elit.
consectetur adipiscing elit.
consectetur adipiscing elit.
consectetur adipiscing elit.
consectetur adipiscing elit.
overflow – co zrobić z nadmiarową zawartością
overflow: visible; /* widoczne - domyślne */ overflow: hidden; /* ukryte */ overflow: scroll; /* pasek przewijania */ overflow: auto; /* jeśli potrzeba - scroll, jeśni nie - wisible */
text-overflow – nadmiarowość tekstu
text-overflow: clip; /* domyślne */ text-overflow: ellipsis; /* przycięcie */