@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>
.tobuy-shance__title_accent {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
pointer-events: none;, а потом для нужных элементов включать, в данном случае для canvasFluid: pointer-events: all;
body {position: fixed;}window.addEventListener("scroll", event => {
event.preventDefault();
window.scrollTo(0, 0);
});div {
max-height: 20rem;
overflow-x: hidden;
overflow-y: auto;
margin-right: 0.25rem;
::-webkit-scrollbar-track {
border-radius: 0.125rem;
background-color: lightgray;
}
::-webkit-scrollbar {
width: 0.25rem;
border-radius: 0.125rem;
}
::-webkit-scrollbar-thumb {
border-radius: 0.125rem;
background-color: gray;};
}
}
const bodyEl = document.body;
let lastScrollPos = 0;
const scrollBodyLock = () => {
lastScrollPos = window.pageYOffset;
bodyEl.style.overflow = 'hidden';
bodyEl.style.position = 'fixed';
bodyEl.style.top = `-${lastScrollPos}px`;
bodyEl.style.width = '100%';
}
const scrollBodyUnlock = () => {
bodyEl.style.removeProperty('overflow');
bodyEl.style.removeProperty('position');
bodyEl.style.removeProperty('top');
bodyEl.style.removeProperty('width');
window.scrollTo(0, lastScrollPos);
}
<header class="header"> отступа нет, а перед <div class="container"> отступ в виде 4 пробелов есть - он тоже сохраняется. Шаблонизатор просто не добавляет дополнительные отступы, которые были перед директивой @@include ко всем строкам подключаемого шаблона.