Podstawowe kolory jakie można użyć na stronie [HTML]
by: Aurelia SypniewskaPosted on:

Właściwości CSS text-align, text-justify

Czas czytania: < 1 minut

W tym wisie omówię, kilka powiązanych ze sobą właściwości CSS. Zadaniem ich jest wyrównanie (pozycjonowanie, układanie) tekstu na stronie.

Kierunek wyświetlania tekstu

Na pewno już mieliście do czynienia z tymi właściwościami są one bowiem dosyć podstawę. Chociaż pojawi się również dość nowa właściwość text-justify – trudno jest mi powiedzieć coś na jej temat bo w mojej przeglądarce jeszcze nie działa (dopiero ma być wprowadzona). Widziałam ją jednak pod Firefox i zapowiada się dość ciekawie.

Planuję za pewien czas opublikować zestawienie właściwości CSS oddziałujących na tekst. Technicznie zestawienie jest już napisane czeka jednak na publikację informacji o innych właściwościach.

Cechy właściwości text-align

Właściwość CSS text-align służy do wyrównywania tekstu na stronie.

text-align przybiera następujące własności:

  • left – tekst do lewej (ustawienie domyślne)
  • right – tekst przesunięty do prawej
  • center – wyśrodkowanie tekstu na stronie
  • justify – wyjustowanie, tekst rozkłada się na całą szerokość kontenera

Właściwość jest obsługiwana praktycznie przez wszystkie przeglądarki internetowe.

<div style="border:1px solid #333; max-width: 300px;">
   <p style="text-align:left;">tekst do lewej strony</p>
   <p style="text-align:right;">tekst do prawej strony</p>
   <p style="text-align:center;">tekst na środku kontenera</p>
   <p style="text-align:justify;">tekst wyjustowany, lepiej widać efekt jak jest długi</p>
</div>

tekst do lewej strony

tekst do prawej strony

tekst na środku kontenera

tekst wyjustowany, lepiej widać efekt jak jest długi

Właściwość text-justify

Zadaniem text-justify jest wpływanie na sposób justowania (czyli wymagane jest ustawienie text-align: justify). Posiada ona wartości:

  • auto
  • inter-word
  • inter-character
  • none

Właściwość ta jest stosunkowo nowa i dopiero w planach wielu przeglądarek internetowych takich jak Chome jest jej obsługa. Dlatego warto spojrzeć na przykłady w kilku przeglądarkach internetowych.

Przykłady:

See the Pen
text-justify by Aura (@Julka85)
on CodePen.0

text-indent – czyli wcięcia akapitowe

O wcięciach akapitowych pisałam już wcześniej więc odsyłam was do tego wpisu.