Text-justify w CSS3

By /

CSS

Właściwość text-justify w CSS3 jest używana do określenia, jak tekst powinien być justowany, czyli wyrównany w bloku tekstu. Pozwala na bardziej zaawansowane sterowanie sposobem, w jaki przestrzenie są rozdzielane między słowami lub literami w tekście, aby zapewnić bardziej jednolity i estetyczny wygląd tekstu.

Przykład użycia text-justify w HTML i CSS

Poniższy przykład pokazuje, jak można zastosować właściwość text-justify do tekstu w elemencie <p>, aby uzyskać różne efekty wyrównania tekstu. Nie wymaga użycia JavaScript, ponieważ jest to właściwość czysto CSS.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania text-justify w CSS3</title>
    <style>
        .justify-inter-word {
            text-align: justify;
            text-justify: inter-word; /* Wyrównanie tekstu poprzez dodawanie przestrzeni między słowami */
        }

        .justify-inter-character {
            text-align: justify;
            text-justify: inter-character; /* Wyrównanie tekstu poprzez dodawanie przestrzeni między znakami */
        }

        .paragraph {
            width: 80%;
            margin: 20px auto;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>

    <div class="paragraph justify-inter-word">
        <p>Ten akapit jest przykładem tekstu wyrównanego do obu stron z użyciem właściwości text-justify: inter-word. Dzięki temu przestrzenie między słowami są dostosowywane, aby tekst był równo wyrównany po obu stronach.</p>
    </div>

    <div class="paragraph justify-inter-character">
        <p>Ten akapit jest przykładem tekstu wyrównanego do obu stron z użyciem właściwości text-justify: inter-character. Dzięki temu przestrzenie między znakami są dostosowywane, co może być przydatne w językach, gdzie pisanie odbywa się bez użycia przerw między słowami.</p>
    </div>

</body>
</html>

Wyjaśnienie właściwości text-justify

  • inter-word: Jest to najczęściej używany tryb justowania tekstu. Dodaje przestrzeń między słowami, aby wiersze tekstu rozciągały się od jednego krańca kontenera do drugiego, co sprawia, że bloki tekstu mają równą szerokość.
  • inter-character: Tryb ten dodaje przestrzenie między znakami (a nie słowami), co może być szczególnie przydatne w językach, w których tekst nie jest oddzielony spacjami, takich jak japoński czy chiński.

Podsumowanie

Właściwość text-justify w CSS3 umożliwia precyzyjne sterowanie justowaniem tekstu, co pozwala twórcom stron internetowych na osiągnięcie pożądanych efektów estetycznych i poprawę czytelności tekstu. Zarówno tryb inter-word, jak i inter-character oferują różne podejścia do wyrównywania tekstu, które mogą być wykorzystane w zależności od potrzeb konkretnego projektu. Wybór odpowiedniego trybu justowania może znacząco wpłynąć na ogólny wygląd i odczucie strony internetowej, dlatego ważne jest, aby eksperymentować z różnymi opcjami, aby znaleźć najlepsze rozwiązanie dla danego tekstu.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top