Как говорится, век живи — век учись. Оказывается, в CSS уже относительно давно за префиксами и не так давно без префиксов в большинстве браузеров есть свойство
box-decoration-break: clone, которое позволяет творить магию с многострочными inline-элементами.Браузер очень специфично работает с текстом. Ему нужно чётко понимать, где находятся границы элемента, куда рисовать бордеры, фон. И для многострочных текстов всё ещё веселее: нужно сделать фон для каждой строчки отдельно или для контейнера, который вмещает текст целиком?
Если ваш элемент инлайновый, то тогда браузер рисует бордеры ооочень специфично. Но и по спецификации, всё честно. У вас у первой строчки (фрагмента) будет левый бордер, у последней — правый, а на остальных строчках (фрагментах) — рельсы без левых и правых границ. С градиентным фоном тоже своим приколы. И не то чтобы мне часто нужно было стилизовать похожие случаи, но когда всё-таки было нужно, приходилось разбивать строчки явно через HTML, а дальше уже span-ы отдельно стилизовать. Такое себе решение, адаптивность ниже среднего.
Так вот,
box-decoration-break: clone — и теперь каждая строчка (фрагмент) становится самостоятельной. Со своим фоном, своими границами.В статье много демок, которые объяснят лучше моих попыток словами передать визуализацию.
Из особенностей: Safari всё ещё просит префикс
-webkit- для работы свойства.https://css-tricks.com/decorating-lines-of-text-with-box-decoration-break/
