Om du vill behålla utfyllnad i båda ändarna av varje rad i en radbruten markering använder du box-decoration-break: clone på ett inline-element tillsammans med dess bakgrund och utfyllnad. Ta med deklarationen med WebKit-prefix för Safari. MDN förklarar fragmentdekoration.

Den här guiden är avsedd för dig som redigerar en webbsida på en Mac och vill att en markerad fras ska radbrytas naturligt i en rubrik eller ett stycke. Uppgiften är att ge varje resulterande rad en egen bakgrund med utfyllnad, samtidigt som webbläsaren får sköta radbrytningen.

Varför försvinner utfyllnaden där markeringen radbryts?

Startvärdet för box-decoration-break är slice. När en inline-box delas över flera rader behandlar det värdet dekorationen som en sammanhängande box som skärs upp i fragment. Utfyllnad läggs inte till vid de avbrutna kanterna. Med clone får varje fragment sin egen utfyllnad, kantlinje och bakgrundsdekoration. W3C definierar båda fragmenteringsbeteendena.

Den skillnaden förklarar ett vanligt resultat: om du lägger till mer horisontell utfyllnad blir början och slutet av hela frasen luftigare, men kanterna mellan raderna ser fortfarande trånga ut. Det som saknas är inställningen som styr vad som händer vid dessa brytpunkter; att bara öka utfyllnaden ändrar inte det.

Behåll markeringen som en inline-box. En blockbakgrund dekorerar den omslutande rektangeln, medan en inline-markering följer textflödet. MDN beskriver skillnaderna i storlek och avstånd för block-, inline- och inline-block-boxar. Se MDN:s guide till boxmodellen.

Skapa ett komplett exempel på din Mac

Skapa en oformaterad textfil med namnet wrapped-highlight.html i en kodredigerare, klistra in hela exemplet nedan och spara filen. Öppna filen i webbläsaren på datorn. Du behöver inte installera något paket eller använda extern CSS eller JavaScript.

Den syntetiska rubriken representerar en enkel sidintroduktion. En span omsluter hela den dekorerade frasen. WHATWG definierar span-elementet som en generisk behållare på textnivå utan egen betydelse, vilket gör det lämpligt för den här rent visuella grupperingen. Läs HTML-standardens definition av span.

<!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>

Gör webbläsarfönstret smalare tills rubriken radbryts och gör det sedan bredare igen. Granska början och slutet av varje markerad rad. Resultatet ska vara ett separat bakgrundsfragment med utfyllnad runt varje rad, med samma utseende när radbrytningen ändras. MDN:s exempel använder samma par av prefixed- och standarddeklarationer. Se den dokumenterade syntaxen och exemplen.

Måtten här är illustrativa designval. Börja med att ändra den horisontella utfyllnaden, 0.3em, om ändarna ser för trånga eller för breda ut. Ändra den vertikala utfyllnaden, 0.08em, separat. Låt radbrytningstestet vara aktivt medan du justerar något av värdena.

Om du vill jämföra beteendena ändrar du tillfälligt båda dekorationsdeklarationerna från clone till slice, sparar och läser in sidan igen. Återställ sedan båda till clone. Om du ändrar båda blir jämförelsen inte beroende av vilken deklaration webbläsaren känner igen.

Vilka webbläsarstöd gäller på en Mac?

Behåll båda deklarationerna i exemplet. MDN:s aktuella kompatibilitetsdata anger stöd för standardegenskapen från och med Chrome 130 och Firefox 32. Safari stöds med prefixet -webkit-, och den implementationen gäller bara inline-element. Granska MDN:s data om webbläsarkompatibilitet.

Den begränsningen för inline-element passar den här uppgiften: en fras som bryts över textrader fragmenteras inline. Det innebär inte att motsvarande stöd finns för ett block som fragmenteras över kolumner eller utskrivna sidor. Håll dessa layoutfall åtskilda när du utvärderar resultatet.

Testa filen i de Mac-webbläsare som är relevanta för din sida. Använd ett smalt och ett brett fönster, förstora sedan sidtexten och upprepa testet. Räkna med att antalet rader varierar; godkännandekriteriet är jämn utfyllnad på de fragment som varje webbläsare faktiskt skapar.

Om en miljö inte känner igen någon av deklarationerna går det inte att använda förbättringen som klonar dekorationen per rad. Se till att den underliggande texten och bakgrunden fortfarande fungerar, eller välj en blocklösning med utfyllnad om en enda rektangulär bakgrund uppfyller designkravet. Det förändrar utseendet, så välj det medvetet.

Hur undviker du överlappande bakgrunder och besvärlig radbrytning?

Utfyllnad och radhöjd löser olika problem. I en vanlig inline-box kan den övre och nedre utfyllnaden utöka det målade området utan att skapa mer avstånd till innehållet runtomkring. Därför kan ökad vertikal utfyllnad göra att intilliggande markerade rader överlappar. MDN beskriver uttryckligen detta beteende hos inline-boxar. Se inline-utfyllnad och innehållet runtomkring.

Justera rubrikens line-height tillsammans med markeringens vertikala utfyllnad. Exemplet börjar med ett medvetet luftigt 1.65. Minska det gradvis om avstånden känns för stora och kontrollera den smalaste layouten varje gång. Det finns inget enskilt avståndsvärde som passar alla teckensnitt och dekorationer.

Använd den här felsökningssekvensen för att hitta orsaken innan du ändrar mer CSS:

Det du ser Kontrollera först Nästa åtgärd
Utfyllnad finns bara vid frasens ytterkanter Dekorationens beteende Använd båda deklarationerna clone på det markerade inline-elementet.
En stor bakgrundsrektangel Vilket element som har bakgrunden Lägg bakgrunden och utfyllnaden på den inre inline-spanen.
Markerade rader ligger tätt vertikalt Vertikal utfyllnad och det överordnade elementets radhöjd Minska den vertikala utfyllnaden eller öka radhöjden.
En lång etikett sticker utanför behållaren Tillgängliga möjligheter till radbrytning Överväg den valfria regeln för långa ord nedan.
Bara Safari saknar den avsedda utfyllnaden vid radsluten Deklarationen med prefix Kontrollera att -webkit-box-decoration-break: clone finns kvar i stilmallen.

För en syntetisk etikett som inte kan brytas, till exempel AmberTileSequenceAmberTileSequence, kan du lägga till overflow-wrap: anywhere i .sample-title. Det här är ett valfritt CSS-fragment som du lägger till i den befintliga regeln; resten av exemplet är oförändrat.

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

Det gör att en sträng som annars inte kan brytas får brytas vid behov för att förhindra att den svämmar över, utan att ett bindestreck infogas. Det skapar fler möjligheter till radbrytning, men utfyllnaden påverkas inte. Vanliga fraser med mellanrum behöver kanske inte regeln. MDN beskriver villkoren för overflow-wrap.

Tänk också på själva bakgrunden. Med clone ritas bakgrunder separat för varje fragment, så en toning eller bakgrundsbild kan börja om på varje rad. Använd en enfärgad bakgrund om du vill ha en jämn markering utan ett upprepat bildmönster. W3C beskriver oberoende bakgrunder för fragment.

Bevara textflödets naturliga form och formningsgränser

Använd en omslutning runt hela den avsedda frasen i stället för att skapa separata omslutningar för de rader som syns just nu. Då förblir markeringen oberoende av fönstrets aktuella bredd och valet av teckensnitt.

Undvik att dela upp ett ord i teckenspannar med utfyllnad för att efterlikna effekten. CSS Text-specifikationen kräver att formning bryts över inline-gränser när utfyllnad, kantlinjer eller marginaler längs den horisontella axeln med andra värden än noll skiljer intilliggande typografiska teckenenheter åt. En gräns med utfyllnad inuti ett ord kan därför påverka formningen av glyfer. Se W3C:s regler för formning över gränser.

För den här rubriken placerar du omslutningen vid frasens början och slut och låter den inre texten vara sammanhängande. Den praktiska fördelen är att du slipper införa ytterligare gränser med utfyllnad inuti frasen. Det garanterar inte identiska glyfer eller radslut mellan webbläsare och teckensnitt; granska den faktiska återgivning du tänker använda.

Vad gör du om projektet använder Tailwind CSS?

I ett befintligt Tailwind-projekt lägger du till box-decoration-clone på inline-elementet som redan har markeringens bakgrund och utfyllnad. Tailwinds aktuella dokumentation kopplar den verktygsklassen till box-decoration-break: clone. Verktygsklassen box-decoration-slice väljer det andra beteendet. Se Tailwinds verktygsklasser för box-decoration-break.

Behåll webbläsarkravet från exemplet med vanlig CSS: granska den genererade stilmallen efter deklarationen med prefix där Safari-stöd behövs och lägg till den via projektets anpassade CSS om den saknas. Verktygsklassen väljer dekorationsbeteende; den tar inte bort begränsningar i webbläsarimplementationen.

Du behöver inte lägga till Tailwind enbart för den här effekten. Det kompletta lokala exemplet innehåller redan den CSS som behövs.

Kan en anpassad markering använda samma utfyllnad?

En range i CSS Custom Highlight API som formateras med ::highlight() har andra möjligheter än ett formaterat inline-element. MDN listar vilka egenskaper som är tillåtna, däribland textfärg, bakgrundsfärg och textdekorationer. Utfyllnad och box-decoration-break ingår inte i den listan. Läs om begränsningarna för formatering av anpassade markeringar.

Om du kontrollerar markuppen och behöver verklig utfyllnad på varje rad ska du använda en inline-omslutning som i exemplet ovan. Om du måste behålla en range-baserad markering utan omslutningar använder du de färg- och dekoreringsegenskaper som stöds och accepterar att API:et inte tillhandahåller fragmentboxar med utfyllnad.

För en radbruten sidh rubrik eller fras använder du en enda inline-omslutning, lägger bakgrunden och utfyllnaden tillsammans och använder båda deklarationerna clone. Avsluta med att testa olika bredder och kontrollera det vertikala avståndet. Då ser du om markeringen fungerar med det faktiska textflödet och inte bara vid en praktisk fönsterstorlek.

Källor