Akapity Tekst w CSS3

Plansza interaktywna marzec 2015

URL:
http://www.plotkarka.eu/PI/css3-text/
Autor:
Radosław Kowaluk

Tranformacje tekstu

Transformacja tekstu: brak, pierwsze wielkie litery, wersaliki (wielkie litery), małe litery, stała szerokość CSS3
text-transform:
none; capitalize; uppercase; lowercase; full-width;
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit

Białe znaki

Znaki specjalne
white-space:
normal; nowrap; pre; pre-line; pre-wrap;
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

Tabulatory

Wielokość tabulatora CSS3
tab-size:
integer np. 2 length np. 2px
Lorem ipsum dolor Lorem ipsum dolor

Formatowanie akapitu

Sposób przenoszenia wyrazów

word-break CSS3
word-break:
normal; keep-all; break-all ;

Lorem ipsum do lor sit amet, con sectetuer

Lorem ipsum do lor sit amet, con sectetuer

Lorem ipsum dolor sit amet, consectetuer

Dzielenie wyrazów

Dzielenie wyrazów: brak, ręczny podział, automatycznie CSS3
hyphens:
none; manual; auto;

Lorem ipsum do­lor sit amet, consectetuer

Lorem ipsum do­lor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer

Wymaga określenia języka elementu - atrybut lang.

Do recznego dzielenia wyrazów zasujemy encję: ­ (łącznik opjonalny - dywiz).

Formatowanie akapitu

Zawijanie tekstu

Przenoszenie CSS3
word-wrap: | overflow-wrap:
normal; break-word;

Lorem ipsum

Lorem ipsum

Wyrównywanie tekstu

Wyrównywanie tekstu
text-align:
start; CSS3 start end; CSS3 left; center;
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
right; end; CSS3 justify; match-parent; CSS3
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,

Formatowanie akapitów

Odstępy

Spacje międzywyrazowe
word-spacing:
normal; length np. 6px;
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
Spacje międzyliterowe
letter-spacing:
normal; length np. 3px;
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,

Wyróżnienie akapitu

Wcięcie pierwszego wiersza
text-indent:
length np. 20px; percentage  np. 5%;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Formatowanie akapitów