Как сверстать этот элемент?

Question

[Andrew E]

Нужно сверстать таким образом, чтобы при переносе строки, округление было со всех краев, а не только в конце и начале строки. Предсказать как строка будет переносится практически невозможно, не писать же брекпоинт на каждые 10 пикселей. Есть ли какое решение?



https://codepen.io/efremandre/pen/NWJqeye?editors=1100

сейчас вот так и если экран станет меньше, строка сломается в другом месте.

Answer 1

[Сергей delphinpro]

https://developer.mozilla.org/.../box-decoration-break

.tobuy-shance__title_accent {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Поддержка в целом неплохая, но с префиксом. https://caniuse.com/css-boxdecorationbreak

Comments

[Andrew E]

шикарно, то что нужно и даже в мобильном сафари работает)

Answer 2

[UthvfyV]

Попробуйте классу tobuy-shance__title_accent задать бэкграунд не цветом а картинкой. Картинка розового цвета с радиусом. Задайте длинну и background-position:; 100% 100%; и background-size: 100% 100%; Почему строка сломается? Задавать надо не в px а %. А если в коце сломается то вручную подгонять, я думаю в конце будет не много правок при помощи @media. Или же действительно каждой букве задайте span и соответсвенно border-radius (для каждой буквы). Задайте общий бэкграунд. И если строка сломается, то конец и начало, сломанного места будут с радиусом, Уж буква никак не сломается пополам. Только задавайте общий бэкграунд с учётом радиуса. Чтоб общий не перекрывал радиус. Или попробуйте через js. При помощи медиа запросов.

<style>.tobuy-shance__title_accent {
height: 40px;
background-color: yellow;
width: 500px;
display: block;
border: 1px solid #000;
}</style>

<span class="tobuy-shance__title_accent"></span>

<script>
function titleAccent(x) {
var title = document.querySelector('.tobuy-shance__title_accent');
if (x.matches) {
// если размер экрана больше 1000px
title.style.cssText = 'border-radius: 60px;';} 
else {
// если размер экрана меньше 1000px
// здесь я умышленно указал radius 0 чтоб вы убелись что оно работает
// если вместо border-radius: 0px; написать border-radius: 60px; то при лбюом размере экрана будет border-radius: 60px
title.style.cssText = 'border-radius: 0px;';}}

var x = window.matchMedia("(min-width: 1000px)")
titleAccent(x);
x.addListener(titleAccent);</script>

Comments

[Andrew E]

Тоже как вариант. Спасибо за ответ)

[UthvfyV]

тут в js есть неточность. Если поставить меньше чем 1000, допустим 900, работать не будет, не пойму почему. Но тебя это не должно волновать, т.к. 1000 лля твоего вопроса в самый раз. Я напишу потом без этой ошибки, следи за коментами если есть желание.

[UthvfyV]

В этой строке лучше написать иначе, так будет ещё надёжней. Вот это

var title = document.querySelector('.tobuy-shance__title_accent');

замени на var title = document.getElementById('accent'); Чтобы скрипт обрабатывал не класс а id. Назначь id спану. Я написал accent, придумай своё.

[UthvfyV]

исправь на это, тут всё работает. Задай спану id и замени на это.

<script>
function titleAccent(x) {
if (x.matches) {
// если размер экрана больше 1000px
document.all.accent.style.borderRadius = "60px";} 
else {
// если размер экрана меньше 1000px
// здесь я умышленно указал radius 0 чтоб вы убелись что оно работает
// если вместо border-radius: 0px; написать border-radius: 60px; то при лбюом размере экрана будет border-radius: 60px
document.all.accent.style.borderRadius = "0px";}}

var x = window.matchMedia("(min-width: 1000px)")
titleAccent(x);
x.addListener(titleAccent);</script>

Комментарии в скипте мешают. Без них.

<script>function titleAccent(x) {
if (x.matches) {document.all.accent.style.borderRadius = "60px";} 
else {document.all.accent.style.borderRadius = "0px";}}
var x = window.matchMedia("(min-width: 1000px)")
titleAccent(x);
x.addListener(titleAccent);</script>

Где borderRadius = "0px" замени на 60px.