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

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;
}

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:

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

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

Samostatná ukázka

Vypadat by to mělo následovně.

Odkazy jinam

• DevDocs
• W3C