Aby zachować wypełnienie na obu końcach każdego wiersza zawijanego wyróżnienia, zastosuj box-decoration-break: clone do elementu liniowego wraz z jego tłem i wypełnieniem. Dodaj deklarację z prefiksem WebKit dla Safari. MDN wyjaśnia dekorowanie fragmentów.

Ten poradnik jest przeznaczony dla osoby edytującej stronę internetową na Macu, która chce, aby wyróżniona fraza zawijała się naturalnie w nagłówku lub akapicie. Zadanie polega na nadaniu każdemu powstałemu wierszowi własnego tła z wypełnieniem, pozostawiając podział wierszy przeglądarce.

Dlaczego wypełnienie znika w miejscu zawinięcia wyróżnienia?

Wartością początkową właściwości box-decoration-break jest slice. Gdy pole liniowe dzieli się między wiersze, ta wartość traktuje jego dekorację jak ciągłe pole pocięte na fragmenty. Wypełnienie nie jest dodawane przy krawędziach podziału. Przy wartości clone każdy fragment otrzymuje własne wypełnienie, obramowanie i dekorację tła. W3C definiuje oba sposoby fragmentacji.

To rozróżnienie wyjaśnia częsty efekt: zwiększenie poziomego wypełnienia zapewnia więcej miejsca na początku i końcu całej frazy, ale krawędzie pośrednich wierszy nadal wyglądają na ciasne. Brakującym ustawieniem steruje się tym, co dzieje się w miejscach podziału; samo zwiększenie wypełnienia tego nie zmienia.

Pozostaw wyróżnienie jako pole liniowe. Tło elementu blokowego zdobi otaczający go prostokąt, natomiast wyróżnienie liniowe podąża za przepływem tekstu. MDN opisuje różnice w rozmiarze i odstępach między polami blokowymi, liniowymi i blokami liniowymi. Zobacz przewodnik MDN po modelu pudełkowym.

Utwórz kompletny przykład na Macu

W edytorze kodu utwórz plik tekstowy o nazwie wrapped-highlight.html, wklej cały poniższy przykład i zapisz go. Otwórz plik w przeglądarce na komputerze. Nie są wymagane instalowanie pakietów, zewnętrzny arkusz stylów ani JavaScript.

Przykładowy nagłówek przedstawia proste wprowadzenie do strony. Jeden element span obejmuje całą dekorowaną frazę. WHATWG definiuje element span jako ogólny kontener tekstowy, który sam w sobie nie ma znaczenia, dzięki czemu nadaje się do tego czysto wizualnego grupowania. Przeczytaj definicję elementu span w standardzie 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>

Zwężaj okno przeglądarki, aż nagłówek się zawinie, a następnie ponownie je poszerz. Sprawdź początek i koniec każdego wyróżnionego wiersza. Oczekiwanym rezultatem jest osobny fragment tła z wypełnieniem wokół każdego wiersza, z takim samym wyglądem przy kolejnych zmianach zawijania. W przykładach MDN zastosowano tę samą parę deklaracji: z prefiksem i standardową. Zobacz opisaną składnię i przykłady.

Podane wymiary mają charakter przykładowych decyzji projektowych. Jeśli końce wyglądają na zbyt ciasne lub zbyt szerokie, zacznij od zmiany poziomego wypełnienia 0.3em. Osobno zmień wypełnienie pionowe 0.08em. Podczas dostosowywania każdej z tych wartości sprawdzaj zawijanie tekstu.

Aby porównać działanie, tymczasowo zmień obie deklaracje dekoracji z clone na slice, zapisz plik i wczytaj go ponownie. Następnie przywróć w obu wartość clone. Zmiana obu deklaracji pozwala uniknąć uzależnienia porównania od tego, którą deklarację rozpoznaje przeglądarka.

Jakie szczegóły obsługi przeglądarek na Macu mają znaczenie?

Zachowaj w przykładzie obie deklaracje. Aktualne dane o zgodności MDN odnotowują obsługę standardowej właściwości od wersji Chrome 130 i Firefox 32. W przypadku Safari odnotowują obsługę z prefiksem -webkit- i ograniczają tę implementację do elementów liniowych. Sprawdź dane MDN o zgodności przeglądarek.

To ograniczenie dla elementów liniowych pasuje do tego zadania: fraza dzielona między wiersze tekstu podlega fragmentacji liniowej. Nie oznacza ono równoważnej obsługi fragmentacji elementu blokowego między kolumnami lub stronami wydruku. Oceniając rezultat, rozpatruj te przypadki układu osobno.

Przetestuj plik w przeglądarkach na Macu, które mają znaczenie dla Twojej strony. Użyj wąskiego i szerokiego okna, a następnie powiększ tekst strony i powtórz test. Liczba wierszy może się zmieniać; warunkiem akceptacji jest spójne wypełnienie fragmentów, które tworzy dana przeglądarka.

Jeśli dane środowisko nie rozpoznaje żadnej z deklaracji, ulepszenie polegające na klonowaniu dla każdego wiersza będzie niedostępne. Zadbaj, by sam tekst i tło pozostały czytelne, albo wybierz wariant z wypełnionym blokiem, jeśli pojedyncze prostokątne tło spełnia wymagania projektu. Zmienia to wygląd, więc powinno być świadomą decyzją projektową.

Jak zapobiec nakładaniu się teł i niezgrabnemu zawijaniu?

Wypełnienie i odstępy między wierszami rozwiązują różne problemy. W zwykłym polu liniowym wypełnienie górne i dolne może powiększyć malowany obszar, nie odsuwając od niego otaczającej treści. W efekcie zwiększenie wypełnienia pionowego może sprawić, że sąsiadujące wyróżnione wiersze będą się nakładać. MDN wyraźnie opisuje to zachowanie pól liniowych. Zobacz opis wypełnienia liniowego i otaczającej treści.

Dostosuj line-height nagłówka razem z pionowym wypełnieniem wyróżnienia. Przykład używa celowo dużej początkowej wartości 1.65. Jeśli odstępy wydają się nadmierne, stopniowo ją zmniejszaj, za każdym razem sprawdzając najwęższy układ. Nie ma jednej wartości odstępów odpowiedniej dla każdej czcionki i dekoracji.

Zanim zmienisz więcej CSS, skorzystaj z poniższej sekwencji diagnostycznej, aby ustalić przyczynę:

Co widzisz Co najpierw sprawdzić Następne działanie
Wypełnienie występuje tylko na skrajnych końcach frazy Zachowanie dekoracji Zastosuj obie deklaracje clone do wyróżnionego elementu liniowego.
Jedno duże prostokątne tło Który element ma tło Umieść tło i wypełnienie na wewnętrznym elemencie span liniowym.
Wyróżnione wiersze stykają się pionowo Wypełnienie pionowe i wysokość wiersza elementu nadrzędnego Zmniejsz wypełnienie pionowe lub zwiększ wysokość wiersza.
Długa etykieta wystaje poza kontener Dostępne miejsca podziału wiersza Rozważ poniższą opcjonalną regułę dla długich ciągów.
Tylko w Safari brakuje oczekiwanego wypełnienia na końcach Deklaracja z prefiksem Sprawdź, czy -webkit-box-decoration-break: clone nadal znajduje się w arkuszu stylów.

W przypadku syntetycznej etykiety, której nie da się podzielić, takiej jak AmberTileSequenceAmberTileSequence, możesz dodać overflow-wrap: anywhere do .sample-title. To opcjonalny fragment CSS do dodania wewnątrz istniejącej reguły; reszta przykładu pozostaje bez zmian.

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

Pozwala to podzielić ciąg, którego nie da się normalnie złamać, gdy jest to konieczne, aby zapobiec przepełnieniu, bez wstawiania łącznika. Rozwiązuje to problem dostępnych miejsc podziału; nie tworzy wypełnienia. Zwykłe frazy zawierające spacje mogą nie wymagać tej reguły. MDN opisuje warunki działania overflow-wrap.

Weź też pod uwagę samo tło. Przy clone tła są rysowane niezależnie dla każdego fragmentu, więc gradient lub obraz tła może zaczynać się od nowa w każdym wierszu. Użyj jednolitego koloru, gdy chcesz uzyskać równomierne wyróżnienie bez powtarzającego się wzoru obrazu. W3C opisuje niezależne tła fragmentów.

Zachowaj naturalny przepływ tekstu i granice kształtowania

Użyj jednego elementu obejmującego całą docelową frazę zamiast tworzyć osobne elementy dla wierszy widocznych w danej chwili. Dzięki temu znacznik pozostaje niezależny od aktualnej szerokości okna i wybranej czcionki.

Nie dziel słowa na osobne znaki objęte wypełnionymi elementami span, aby zasymulować ten efekt. Specyfikacja CSS Text wymaga przerwania kształtowania na granicach elementów liniowych, gdy niezerowe wypełnienie, obramowanie lub margines w osi liniowej oddzielają sąsiadujące typograficzne jednostki znakowe. Granica z wypełnieniem wewnątrz słowa może zatem wpływać na kształtowanie glifów. Zobacz zasady W3C dotyczące kształtowania na granicach.

W tym nagłówku umieść element obejmujący frazę na jej granicach, a jego wewnętrzny tekst pozostaw ciągły. Dzięki temu nie wprowadzasz dodatkowych granic z wypełnieniem wewnątrz frazy. Nie gwarantuje to identycznych glifów ani końców wierszy w różnych przeglądarkach i czcionkach; sprawdź rzeczywisty wygląd, którego zamierzasz użyć.

A jeśli projekt korzysta z Tailwind CSS?

W istniejącym projekcie Tailwind dodaj box-decoration-clone do elementu liniowego, który ma już tło wyróżnienia i wypełnienie. Aktualna dokumentacja Tailwind przypisuje tej klasie użytkowej box-decoration-break: clone. Klasa box-decoration-slice wybiera drugie zachowanie. Zobacz klasy użytkowe Tailwind dla box-decoration-break.

Zachowaj wymagania dotyczące przeglądarek z przykładu w zwykłym CSS: jeśli potrzebujesz obsługi Safari, sprawdź w wygenerowanym arkuszu stylów, czy jest deklaracja z prefiksem, a jeśli jej brakuje, dodaj ją przez własny CSS projektu. Klasa użytkowa wybiera sposób dekorowania; nie znosi ograniczeń implementacyjnych przeglądarek.

Nie musisz dodawać Tailwind wyłącznie dla tego efektu. Kompletny przykład lokalny zawiera już potrzebny CSS.

Czy własne wyróżnienie może używać takiego samego wypełnienia?

Zakres z CSS Custom Highlight API stylowany przez ::highlight() ma inne możliwości niż stylowany element liniowy. MDN wymienia dozwolone właściwości, w tym kolor tekstu, kolor tła i dekoracje tekstu. Wypełnienie i box-decoration-break nie należą do tego zestawu. Przeczytaj opis ograniczeń stylowania własnych wyróżnień.

Jeśli kontrolujesz znacznik i potrzebujesz rzeczywistego wypełnienia w każdym zawiniętym wierszu, użyj pokazanego wyżej elementu obejmującego tekst. Jeśli musisz zachować wyróżnianie oparte na zakresach bez dodatkowych elementów, użyj obsługiwanych właściwości koloru i dekoracji, pamiętając, że to API nie zapewnia pudełek fragmentów z wypełnieniem.

W przypadku zawijanego nagłówka strony lub frazy użyj jednego elementu liniowego obejmującego tekst, umieść na nim razem tło i wypełnienie oraz zastosuj obie deklaracje clone. Na koniec przetestuj różne szerokości i sprawdź odstępy pionowe. Dzięki tym kontrolom ustalisz, czy wyróżnienie działa przy rzeczywistym przepływie tekstu, a nie tylko w oknie o wygodnym rozmiarze.

Źródła