Dekoracja przełamania obramowania {box-decoration-break}
W jaki sposób pozbyć się nieestetycznego efektu zanikania obramowania podczas przełamania strony lub linii?
CSS 3
selektor { box-decoration-break: dekoracja }Natomiast jako "dekoracja" należy wpisać:
- clone - każdy fragment przełamanego elementu będzie miał osobne obramowanie
- slice - wszystkie fragmenty przełamanego elementu będą miały wspólne obramowanie (domyślnie)
Zdarza się, że na wydruku blok zostanie przełamany pomiędzy dwie kartki w taki sposób, że jego początek znajdzie się na końcu jednej strony, a koniec - na samym początku następnej. W takim przypadku standardowo na dole pierwszego fragmentu ani na górze drugiego nie będzie obramowania. Podobnie jeśli obramowanie zostanie przypisane do długiego elementu wyświetlanego w linii, tak że tekst się przełamie na końcu wiersza, przy prawym marginesie ani w następnej linijce przy lewym nie będzie obramowania. Taki efekt może nie wyglądać estetycznie. Można mu jednak zapobiec za pomocą deklaracji "box-decoration-break: clone".
Przykład {box-decoration-break}
To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza...
box-decoration-break: clone; To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza...
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
box-decoration-break: wartość | 130 2024-10-15 | 32 2014-09-02 | 130 2024-10-17 | 115 2024-11-27 | ❌ |
box-decoration-break: clone | 130 2024-10-15 | 32 2014-09-02 | 130 2024-10-17 | 115 2024-11-27 | 7 2013-10-22 |
box-decoration-break: slice | 130 2024-10-15 | 32 2014-09-02 | 130 2024-10-17 | 115 2024-11-27 | 7 2013-10-22 |