jajozeldev.eu

Správanie textu: zalamovanie, riadky, „…“

Zarovnanie textu v `<p>`: zalamovanie, riadky, „…“

HTML šablóna

<body>
  <div class="ukazka">
    <p>
        "nejaký text"
    </p>
  </div>
</body>

CSS štart

.ukazka {
  border: 1px solid #a50000;
  padding: 16px;
}

/* tu budeme skúšať vlastnosti */
.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
}

1) Zarovnanie textu (text-align)

1.1 Default (vľavo) `text-align: left;`

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  text-align: left;
}

Toto je bežné správanie: text začína vľavo a končí tam, kde skončí riadok.

1.2 Stred `text-align: center;`

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  text-align: center;
}

Text je vycentrovaný. Použiteľné skôr na krátke texty (napr. nadpisy), nie na dlhý odsek.

1.3 Vpravo `text-align: right;`

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  text-align: right;
}

Skôr výnimočne (napr. podpis, cena, čísla).

1.4 Do bloku (justify) `text-align: justify;`

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  text-align: justify;
}

Tu sa deje to, že prehliadač „roztiahne medzery“ tak, aby riadok končil pekne zarovno vpravo aj vľavo.

Pozor na nevýhodu: niekedy vzniknú divné veľké medzery medzi slovami.

Ak chceš, môžeš to trochu „zjemniť“ s hyphens:

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  text-align: justify;
  hyphens: auto;
}

hyphens: auto; umožní delenie slov (funguje lepšie, keď má dokument správny jazyk, napr. lang="sk" na <html>, ale nie bezchybne).

2) Zalamovanie textu (wrap)

Zalamovanie znamená: „čo sa stane, keď sa text už nezmestí do šírky“.

2.1 Normálne správanie (default)

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  white-space: normal;
}

Text sa láme medzi slovami.

2.2 Keď máš dlhé slovo / URL a nechce sa zalomiť

Príklad: veľmi dlhý string bez medzier (link, hash, kód).

<body>
  <div class="ukazka">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat excepturi, est eligendi incidunt quia error
      itaque minima voluptatum quas voluptas eos magni magnam repellat architecto possimus at, accusantium delectus
      accusamus hic modi ipsam molestiae repudiandae praesentium. Facere amet veritatis natus.
      
A teraz dlhé slovo bez medzier:
      superdlheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

      A teraz URL:
      https://example.com/nejaka/straaasne/dlha/cesta/bez/medzier/aby/sme/videli/co/sa/stane

    </p>
  </div>
</body>

Najpraktickejšie je toto:

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  overflow-wrap: anywhere;
}

Alebo miernejšia verzia:

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  overflow-wrap: break-word; /* často stačí */
}

Polopate:

anywhere = „ak treba, zlom to hocikde, aj v strede slova“
break-word = „zlom to, keď naozaj musíš“

3) Koľko riadkov zobraziť (line-clamp)

„Ukáž mi len 3 riadky z odseku“, čo chceš napríklad na kartičkách (výpis blogu, produkty, zoznam).

3.1 Ukáž len 3 riadky a zvyšok schovaj

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Ako to funguje:

povieš: „tento text bude ako krabička s riadkami“
a potom povieš: „dovoľ iba 3 riadky“
a zvyšok „odrež“ (overflow: hidden)

4) Ukončenie „…“ (ellipsis)

Tu sú 2 situácie:

4.1 „…“ pre 1 riadok

Keď chceš, aby bol text len na jednom riadku a potom ...

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Polopate:

nowrap = „nezalamuj, drž to v jednom riadku“
overflow: hidden = „čo sa nezmestí, skry“
ellipsis = „na koniec daj tri bodky“

4.2 „…“ pre viac riadkov (napr. 3 riadky)

Tu sa používa práve line-clamp (z bodu 3). Prehliadač spraví „…“ automaticky podľa možností.

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

5) Extra: presná výška odseku cez line-height

Niekedy chceš mať „pevný layout“: napr. každý card má rovnakú výšku textu.

.ukazka p {
  border: 1px solid #4c7460;
  max-width: 65ch;
  line-height: 1.4;
  max-height: calc(1.4em * 3);
  overflow: hidden;
}

Toto je „ručná verzia“: presne povieš „3 riadky“.
Nevýhoda: nie je to také pohodlné ako line-clamp.

Zarovnanie textu v <p>: zalamovanie, riadky, „…“