box-decoration-break (_vendor.scscs)

Tipo: Mixin

Versión: 2.x.x

Mixin vendor de SISASS para aplicar la propiedad box-decoration-break con su versión prefijada -webkit- y la sintaxis estándar.

Esta propiedad controla cómo se repiten o se continúan decoraciones como el background, el border y el padding cuando una misma caja inline se fragmenta en varias líneas, columnas o páginas. Resulta útil para textos destacados, etiquetas o chips que necesitan conservar un acabado visual coherente al partirse.

Nota: Su uso suele ser más útil en elementos con display: inline o inline-block que realmente puedan fragmentarse. Con slice, la decoración se trata como una sola caja continua y se corta entre fragmentos; con clone, cada fragmento vuelve a dibujar su fondo, borde y padding de forma independiente.

Interface

@mixin box-decoration-break($br);

Parámetros secuenciales

Parámetro Tipo Default Descripción
br Keyword | String - Define el valor que se asignará a la propiedad box-decoration-break.

Ejemplo

Slice

Un texto con salto de línea para mostrar el comportamiento del fondo.

Clone

Un texto con salto de línea para mostrar el comportamiento del fondo.


            

            
<div class="box_decoration_break_example">
                    <div class="box_decoration_break_item">
                        <div class="box_decoration_break_label">slice</div>
                        <span class="box_decoration_break_text box_decoration_break_text--slice">
                            Un texto con salto de línea para mostrar el comportamiento del fondo.
                        </span>
                    </div>

                    <div class="box_decoration_break_item">
                        <div class="box_decoration_break_label">clone</div>
                        <span class="box_decoration_break_text box_decoration_break_text--clone">
                            Un texto con salto de línea para mostrar el comportamiento del fondo.
                        </span>
                    </div>
                </div>