Zarovnanie, zalomenie textu v <p>

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

Zarovnanie textu obrázok

 

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

Toto je praktický prehľad toho, čo sa s textom deje vo vnútri odseku: ako sa zarovnáva, kde sa zalamuje, čo spraviť s dlhým slovom alebo URL a ako obmedziť počet riadkov.

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 riadky sa lámu podľa dostupnej šírky.

1.2 Stred – text-align: center;

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

Text je vycentrovaný. Hodí sa skôr na krátke texty, nie na dlhý odsek.

1.3 Vpravo – text-align: right;

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

Používa sa skôr výnimočne, napríklad pri číslach, cenách alebo podpise.

1.4 Do bloku – text-align: justify;

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

 

 

Prehliadač „roztiahne medzery“ medzi slovami tak, aby riadok končil zarovno vľavo aj vpravo.

Pozor: niekedy vzniknú nepríjemne veľké medzery medzi slovami.

Pomôcť môže:

.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ávne nastavený jazyk, napríklad lang="sk" na <html>.

2) Zalamovanie textu

Zalamovanie znamená: čo sa stane, keď sa text nezmestí do šírky boxu.

2.1 Normálne správanie (default)

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

Text sa láme prirodzene medzi slovami.

2.2 Keď máš dlhé slovo alebo URL

Príklad: veľmi dlhý string bez medzier, napríklad URL, hash alebo kus kódu.

<body>
  <div class="ukazka">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.

      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 riešenie býva 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;
}

Polopate:

  • anywhere = ak treba, zlom to hocikde
  • break-word = zlom to, keď naozaj musíš

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

Typická situácia: „Ukáž mi len 3 riadky textu“, napríklad na kartičkách vo výpise blogu alebo produktov.

3.1 Len 3 riadky a zvyšok skry

.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:

  • text sa správa ako box s riadkami,
  • povieš mu maximum 3 riadky,
  • a zvyšok skryješ cez overflow: hidden.

4) Ukončenie „...“ (ellipsis)

Tu sú dve odlišné situácie.

4.1 „...“ pre 1 riadok

Keď chceš, aby text ostal len na jednom riadku a potom sa ukončil tromi bodkami.

.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
  • text-overflow: ellipsis = na koniec daj „...“

4.2 „...“ pre viac riadkov

Tu sa používa práve line-clamp z predchádzajúceho bodu.

.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š pevnejší layout, napríklad aby každá karta mala 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 „3 riadkov“.

Nevýhoda: nie je to také pohodlné ako line-clamp.

Zhrnutie

  • text-align rieši zarovnanie textu
  • white-space rieši, či sa text zalamuje
  • overflow-wrap pomáha pri dlhých slovách a URL
  • line-clamp obmedzí počet riadkov
  • text-overflow: ellipsis rieši „...“ pre jeden riadok
  • pri dlhšom texte býva najčitateľnejšie ľavé zarovnanie a rozumná šírka, napríklad max-width: 65ch

 

Súvisí to aj s tým, čo robím

Pozrite sa, s čím viem pomôcť

Ak riešite nový web, úpravy existujúcej stránky alebo audit SEO, GEO, prístupnosti a výkonu, pozrite si moje služby.

Jednoduchý web na mieru

Pre menšie prezentácie, firemné weby a stránky, ktoré majú byť prehľadné, rýchle a ľahko použiteľné.

Pozrieť službu

Zložitejší web na mieru a webová aplikácia

Keď už nestačí len jednoduchá prezentácia a web potrebuje vlastnú logiku, správu dát alebo rozšírené funkcie.

Pozrieť službu

SEO, GEO a prístupnostný audit

Kontrola technického stavu webu, viditeľnosti vo vyhľadávaní, prístupnosti a celkovej použiteľnosti.

Pozrieť službu

Úpravy a rozšírenie webu

Keď web už existuje, ale potrebuje opravy, vylepšenia, zrýchlenie alebo nové časti.

Pozrieť službu
← Späť na blog Pozrieť služby →