Moderní tvorba webových aplikací

O webu

Box-decoration-break

Vlastnost box-decoration-break upravuje chování stylu elementu při zalomení řádku.

4 minuty

Podpora

Funguje mimo IE, v některých ostatních prohlížečích jen s prefixy.

Řádkové prvky

Když nějakému řádkovému prvku (display: inline) přidáme rámeček, stín nebo pozadí s přechodem, může se v případě jeho zalomení stát ne úplně pěkná věc. Efekt se rozdělí na několik řádků.

Text
s dekorací se zalomí do několika řádků.

Pokud není pravděpodobné, že v elementu se zvláštní dekorací bude něco hodně dlouhého, asi nejlepší řešení je zrušit zalamování:

element {
  white-space: nowrap;
}

Pro ostatní případy se může hodit právě box-decoration-break. Při nastavení na clone dekorační efekt skončí na konci řádku, aby na novém zase začal odznovu. Nerozlišuje se, jestli je zalomení přirozené nebo vyvolané značkou <br>.

Zápis

Hodnota clone způsobí zduplikování celého vzhledu na každý jednotlivý řádek, další možná hodnota je slice, která je výchozí – tj. jako by se box-decoration-break vůbec nepoužilo.

element {
  /* dekorace */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
}
Text
s dekorací se zalomí do několika řádků.

Samostatná ukázka (ukázka s obrázkovým gradientem – přechod začne odznovu na každém řádku)

V ideálním případě by se měla výše uvedená ukázka zobrazovat takto:

Správné zobrazení box-decoration-break: clone

Zajímavě se chová IE, který vykresluje nezávisle na vlastnosti box-decoration-break něco mezi clone a slice:

Zobrazení v IE

Blokové elementy

Klonování efektu pomocí box-decoration-break jde použít i u blokových elementů – význam to má u zobrazení ve sloupcích (korektně funguje jen ve Firefoxu).

Text s dekorací se zalomí do několika sloupců. Jak se bude efekt napojovat je možné ovlivnit.

Samostatná ukázka

Vypadat by to mělo následovně.

Správné zobrazení sloupců

Odkazy jinam

Související články

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

12 minut

Možnosti stylování <iframe>

Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.

10 minut

Zvýraznění aktivní sekce při rolování

Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.

5 minut

CSS funkce random()

Jak v CSS generovat náhodné hodnoty pomocí random() a kdy ji použít.

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025