Per mantenere il padding a entrambe le estremità di ogni riga dell’evidenziazione che va a capo, applica box-decoration-break: clone a un elemento inline, insieme allo sfondo e al padding. Includi la dichiarazione con il prefisso WebKit per Safari. MDN spiega la decorazione dei frammenti.

Questa guida è pensata per chi modifica una pagina web su Mac e vuole che una frase evidenziata vada a capo in modo naturale all’interno di un titolo o di un paragrafo. L’obiettivo è assegnare a ogni riga risultante uno sfondo con padding, lasciando che sia il browser a gestire le interruzioni di riga.

Perché il padding scompare nel punto in cui l’evidenziazione va a capo?

Il valore iniziale di box-decoration-break è slice. Quando un box inline si interrompe su più righe, questo valore tratta la sua decorazione come un box continuo suddiviso in frammenti. Il padding non viene aggiunto ai bordi delle interruzioni. Con clone, ogni frammento riceve un proprio padding, bordo e sfondo. W3C definisce entrambi i comportamenti di frammentazione.

Questa distinzione spiega un risultato comune: aggiungere altro padding orizzontale rende più ampi gli spazi all’inizio e alla fine dell’intera frase, ma i bordi delle righe intermedie restano stretti. L’impostazione mancante controlla il comportamento in corrispondenza di quelle interruzioni; aumentare soltanto il padding non lo cambia.

Mantieni l’evidenziazione come box inline. Uno sfondo a blocco decora il rettangolo contenitore, mentre un’evidenziazione inline segue il flusso del testo. MDN documenta le differenze nel dimensionamento e nella spaziatura dei box block, inline e inline-block. Consulta la guida di MDN al box model.

Crea un esempio completo sul tuo Mac

In un editor di codice, crea un file di testo semplice chiamato wrapped-highlight.html, incolla l’esempio completo qui sotto e salvalo. Apri il file nel browser desktop. Non sono necessari pacchetti, fogli di stile esterni o JavaScript.

Il titolo di esempio rappresenta una semplice introduzione alla pagina. Uno span racchiude l’intera frase decorata. WHATWG definisce l’elemento span come un contenitore generico a livello di testo privo di significato proprio, adatto quindi a questo raggruppamento puramente visivo. Leggi la definizione di span nello standard HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

Restringi la finestra del browser finché il titolo va a capo, poi allargala di nuovo. Controlla l’inizio e la fine di ogni riga evidenziata. Il risultato previsto è uno sfondo con padding separato per ogni riga, che mantiene lo stesso aspetto al variare degli a capo. Gli esempi di MDN usano la stessa coppia di dichiarazioni, con e senza prefisso. Consulta la sintassi e gli esempi documentati.

Le dimensioni qui indicate sono scelte illustrative di design. Inizia modificando il padding orizzontale, 0.3em, se gli spazi alle estremità sembrano troppo stretti o troppo ampi. Modifica separatamente il padding verticale, 0.08em. Mantieni attivo il test degli a capo mentre regoli entrambi i valori.

Per confrontare i comportamenti, modifica temporaneamente entrambe le dichiarazioni di decorazione da clone a slice, salva e ricarica la pagina. Poi ripristina entrambe a clone. Modificare entrambe evita che il confronto dipenda da quale dichiarazione riconosce il browser.

Quali dettagli sulla compatibilità dei browser sono importanti su Mac?

Mantieni entrambe le dichiarazioni nell’esempio. I dati aggiornati sulla compatibilità di MDN indicano il supporto della proprietà standard da Chrome 130 e Firefox 32. Per Safari indicano il supporto con il prefisso -webkit- e limitano l’implementazione agli elementi inline. Consulta i dati di compatibilità dei browser su MDN.

Questa limitazione agli elementi inline è adatta a questo caso: una frase che va a capo su più righe di testo è una frammentazione inline. Non implica un supporto equivalente per un blocco che si frammenta tra colonne o pagine stampate. Valuta separatamente questi casi di layout.

Prova il file nei browser per Mac importanti per la tua pagina. Usa una finestra stretta e una larga, poi ingrandisci il testo della pagina e ripeti il test. Considera variabile il numero di righe: il criterio di accettazione è un padding coerente sui frammenti effettivamente prodotti da ciascun browser.

Se un ambiente non riconosce nessuna delle due dichiarazioni, il miglioramento che duplica la decorazione su ogni riga non sarà disponibile. Mantieni il testo e lo sfondo sottostante leggibili oppure scegli un trattamento a blocco con padding, se uno sfondo rettangolare unico soddisfa i requisiti di design. Questo cambia l’aspetto, quindi dovrebbe essere una scelta di design consapevole.

Come si evitano sfondi sovrapposti e a capo poco gradevoli?

Padding e interlinea risolvono problemi diversi. In un normale box inline, il padding superiore e inferiore può estendere l’area colorata senza allontanare il contenuto circostante. Di conseguenza, aumentare il padding verticale può far sovrapporre le righe evidenziate adiacenti. MDN documenta esplicitamente questo comportamento dei box inline. Consulta la documentazione sul padding inline e il contenuto circostante.

Regola line-height del titolo insieme al padding verticale dell’evidenziazione. L’esempio usa come punto di partenza un valore 1.65 volutamente ampio. Riducilo gradualmente se gli spazi sembrano eccessivi, controllando ogni volta il layout più stretto. Non esiste un unico valore di spaziatura adatto a ogni font e decorazione.

Segui questa sequenza diagnostica per individuare la causa prima di modificare altro CSS:

Cosa vedi Controlla prima Azione successiva
Il padding compare solo alle estremità esterne della frase Comportamento della decorazione Applica entrambe le dichiarazioni clone all’elemento inline evidenziato.
Un unico grande rettangolo di sfondo Quale elemento contiene lo sfondo Applica sfondo e padding allo span inline interno.
Le righe evidenziate si toccano verticalmente Padding verticale e interlinea del genitore Riduci il padding verticale o aumenta l’interlinea.
Una parola lunga si estende oltre il contenitore Opportunità di andare a capo Valuta la regola facoltativa per le stringhe lunghe riportata sotto.
Solo Safari non mostra il padding previsto alle estremità Dichiarazione con prefisso Verifica che -webkit-box-decoration-break: clone sia ancora nel foglio di stile.

Per un’etichetta di esempio altrimenti impossibile da spezzare, come AmberTileSequenceAmberTileSequence, puoi aggiungere overflow-wrap: anywhere a .sample-title. È un frammento CSS facoltativo da aggiungere alla regola esistente; il resto dell’esempio rimane invariato.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

Questo permette a una stringa altrimenti indivisibile di andare a capo quando serve per evitare un overflow, senza inserire un trattino. Risolve il problema delle opportunità di a capo; non crea padding. Potrebbe non essere necessario per le frasi normali con spazi. MDN documenta le condizioni d’uso di overflow-wrap.

Considera anche lo sfondo. Con clone, gli sfondi vengono disegnati indipendentemente per ogni frammento, quindi una sfumatura o un’immagine di sfondo può ripartire su ogni riga. Usa un colore uniforme quando vuoi un’evidenziazione omogenea senza ripetere un motivo grafico. W3C descrive gli sfondi indipendenti dei frammenti.

Mantieni il flusso naturale del testo e i confini di composizione

Usa un solo wrapper attorno all’intera frase desiderata, invece di creare wrapper separati per le righe visibili al momento. In questo modo il markup non dipende dalla larghezza attuale della finestra né dalla scelta del font.

Evita di suddividere una parola in span per singoli caratteri con padding per simulare l’effetto. La specifica CSS Text richiede che la composizione si interrompa ai confini inline quando padding, bordi o margini non nulli lungo l’asse inline separano unità di caratteri tipografici adiacenti. Un confine con padding all’interno di una parola può quindi influire sulla composizione dei glifi. Consulta le regole W3C sulla composizione ai confini.

Per questo titolo, posiziona il wrapper ai confini della frase e lascia continuo il testo al suo interno. In questo modo eviti di introdurre ulteriori confini con padding all’interno della frase. Ciò non garantisce glifi o interruzioni di riga identici tra browser e font; controlla il rendering effettivo che intendi usare.

E se il progetto usa Tailwind CSS?

In un progetto Tailwind esistente, aggiungi box-decoration-clone all’elemento inline che contiene già lo sfondo e il padding dell’evidenziazione. La documentazione aggiornata di Tailwind associa questa utility a box-decoration-break: clone. La utility box-decoration-slice seleziona l’altro comportamento. Consulta le utility box-decoration-break di Tailwind.

Mantieni il requisito relativo ai browser dell’esempio CSS semplice: controlla nel foglio di stile generato la presenza della dichiarazione con prefisso, se serve il supporto di Safari, e aggiungila tramite il CSS personalizzato del progetto se manca. L’utility seleziona il comportamento della decorazione, ma non elimina i limiti dell’implementazione nei browser.

Non serve introdurre Tailwind solo per ottenere questo effetto. L’esempio locale completo contiene già il CSS necessario.

È possibile applicare lo stesso padding a un’evidenziazione personalizzata?

Un intervallo della CSS Custom Highlight API, formattato con ::highlight(), ha capacità diverse da quelle di un elemento inline formattato. MDN elenca le proprietà consentite, tra cui il colore del testo, il colore di sfondo e le decorazioni del testo. Padding e box-decoration-break non rientrano tra queste. Leggi i limiti documentati per lo stile delle evidenziazioni personalizzate.

Se controlli il markup e hai bisogno di un vero padding su ogni riga che va a capo, usa un wrapper inline come quello mostrato sopra. Se devi mantenere l’evidenziazione basata su intervalli senza wrapper, usa le proprietà di colore e decorazione supportate e accetta che questa API non fornisce box di frammenti con padding.

Per un titolo o una frase che va a capo, usa un solo wrapper inline, applica insieme sfondo e padding e imposta entrambe le dichiarazioni clone. Infine, prova diverse larghezze e controlla la spaziatura verticale. Questi controlli verificano che l’evidenziazione funzioni con il flusso effettivo del testo, non soltanto con una larghezza di finestra comoda.

Fonti