Box-decoration-break

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

15. října 2014

CSS

CSS vlastnosti

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ů