~ Tekst w CSS ~

1. Text-align

Właściwość CSS text-align ustawia poziome wyrównanie zawartości na poziomie wiersza wewnątrz elementu blokowego lub pola komórki tabeli. Oznacza to, że działa jak właściwość vertical-align, ale w kierunku poziomym.

  • text-align: center;
  • text-align: end;
  • text-align: justify;
  • text-align: left;
  • text-align: right;
  • text-align: start;

2. Text-decoration

Skrócona właściwość CSS text-decoration ustawia wygląd linii dekoracyjnych w tekście. Jest to skrót od właściwości text-decoration-line, text-decoration-color, text-decoration-style i nowszej text-decoration-thickness.

  • text-decoration: dashed underline;
  • text-decoration: dotted underline;
  • text-decoration: double underline;
  • text-decoration: line-through;
  • text-decoration: none;
  • text-decoration: overline;
  • text-decoration: solid underline;
  • text-decoration: underline;
  • text-decoration: wavy underline;

3. Text-transform

Właściwość CSS text-transform określa sposób kapitalizacji tekstu elementu. Można jej użyć, aby tekst był pisany wyłącznie wielkimi lub małymi literami, albo z każdym słowem pisanym wielką literą. Może również poprawić czytelność w Ruby.

  • text-transform: capitalize;
  • text-transform: lowercase;
  • text-transform: none;
  • text-transform: uppercase;

4. Text-overflow

Właściwość CSS text-overflow określa sposób sygnalizowania użytkownikom ukrytej zawartości przepełnienia. Można ją przyciąć, wyświetlić wielokropek (…) lub wyświetlić niestandardowy ciąg znaków.

  • text-overflow: clip;

    • Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi, earum?

  • text-overflow: ellipsis;

    • Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, minus.

5. Text-shadow

Właściwość CSS text-shadow dodaje cienie do tekstu. Akceptuje ona rozdzieloną przecinkami listę cieni, które mają zostać zastosowane do tekstu i jego dowolnej dekoracji tekstowej. Każdy cień jest opisany kombinacją przesunięć X i Y od elementu, promienia rozmycia i koloru.

  • text-shadow: none;
  • text-shadow: 0 2px 2px #80808080;
  • text-shadow: 5px 5px 5px #808080;