@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><style>.wrapper {
min-height: 100%;
display: block;
height:100vh;
}</style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/header__main-page.css">
<link rel="stylesheet" href="body.css">
<title>Lorna Shore</title>
<style>
body {
margin: 0;
width: 100%;
}
header {
display: block;
width: 90%;
text-align: center;
margin: 0 auto;
padding: 10px 20px;
}
nav {
display: inline-block;
position: relative;
width: 80%;
text-align: center;
vertical-align: top;
margin: 0 auto;
}
.logo__header {
width: 7%;
text-align: left;
display: inline-block;
}
.logo__header a {
width: 80%;
display: block;
}
ul {
padding: 0;
margin: 0;
vertical-align: top;
display: inline-block;
list-style-type: none;
}
.nav-center {
width: 30%;
margin: 0 20px;
display: inline-block;
}
.account-button__header {
width: 5%;
text-align: right;
display: inline-block;
}
.account-button__header a {
width: 70%;
display: block;
}
img {
width: 100%;
display: block;
}
.left-nav__header {
width: 25%;
}
.right-nav__header {
width: 30%;
}
.left-nav__header li {
display: inline-block;
list-style-type: none;
width: 40%;
vertical-align: top;
margin-left: 10px;
}
.right-nav__header li {
display: inline-block;
list-style-type: none;
width: 28%;
vertical-align: top;
margin-left: 10px;
}</style>
</head>
<body>
<header>
<div class="logo__header"><a href="#"><img src="https://i.ibb.co.com/KFYwpxb/logo-Lorna-Shore.png" alt="logo"></a></div>
<nav class="nav">
<ul class="left-nav__header">
<li><a href="#"><img src="https://i.ibb.co.com/qNnh7Sy/SHOP.png" alt="shop"></a></li>
<li><a href="#"><img src="https://i.ibb.co.com/W0zrw15/Concert-tours.png" alt="concert tours"></a></li></ul>
<a class="nav-center" href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a>
<ul class="right-nav__header">
<li><a href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a></li>
<li><a href="#"><img src="https://i.ibb.co.com/5W5Q8L4/About.png" alt="about"></a></li>
<li><a href="#"><img class="contact-nav__header" src="https://i.ibb.co.com/Bt6jFP6/Contact.png" alt="contact"></a></li></ul></nav>
<div class="account-button__header"><a href="#"><img src="https://i.ibb.co.com/tKTFL2M/account-icon.png" alt="account"></a></div></header>
</body>
</html><style>.heading {
font-size: 28px;
font-weight: bold;
margin-left: calc(7% - 10px);
display: inline-block;
width: auto;
}
.about {
width: 100%;
margin: 0;
display: block;
text-align: center;
}
.number {
display: inline-block;
vertical-align: top;
font-size: 14px;
margin: 5px;
font-weight: bold;
}
.subheading {
display: block;
vertical-align: top;
width: 100%;
}
.column-title {
display: inline-block;
vertical-align: top;
font-weight: bold;
margin: 5px;
line-height: 1;
font-size: 28px;
}
.description {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
.column {
padding: 5px;
width: 28%;
margin: 10px;
text-align: left;
border-radius: 5px;
display: inline-block;
}</style>
<div class="heading">/заголовок</div>
<div class="about">
<div class="column">
<div class="subheading">
<span class="number">01</span>
<span class="column-title">Первое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">02</span>
<span class="column-title">Второе описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">03</span>
<span class="column-title">Третье описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">04</span>
<span class="column-title">Четвертое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">05</span>
<span class="column-title">Пятое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">06</span>
<span class="column-title">Шестое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div></div>element.classList.add("redBackgroundColor1");
element.classList.remove("redBackgroundColor2");.photo {
width: 370px !important;
}<script>var radius = 120;
var dtr = Math.PI/180;
var d=300;
var mcList = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed=10;
var size=250;
var mouseX=0;
var mouseY=0;
var howElliptical=1;
var aA=null;
var oDiv=null;
window.onload=function ()
{
var i=0;
var oTag=null;
oDiv=document.getElementById('div1');
aA=oDiv.getElementsByTagName('a');
for(i=0;i<aA.length;i++)
{
oTag={};
oTag.offsetWidth=aA[i].offsetWidth;
oTag.offsetHeight=aA[i].offsetHeight;
mcList.push(oTag);
}
sineCosine( 0,0,0 );
positionAll();
oDiv.onmouseover=function ()
{
active=true;
};
oDiv.onmouseout=function ()
{
active=false;
};
oDiv.onmousemove=function (ev)
{
var oEvent=window.event || ev;
mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
mouseX/=5;
mouseY/=5;
};
setInterval(update, 30);
};
function update()
{
var a;
var b;
if(active)
{
a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
}
else
{
a = lasta * 0.98;
b = lastb * 0.98;
}
lasta=a;
lastb=b;
if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
{
return;
}
var c=0;
sineCosine(a,b,c);
for(var j=0;j<mcList.length;j++)
{
var rx1=mcList[j].cx;
var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
var rz1=mcList[j].cy*sa+mcList[j].cz*ca;
var rx2=rx1*cb+rz1*sb;
var ry2=ry1;
var rz2=rx1*(-sb)+rz1*cb;
var rx3=rx2*cc+ry2*(-sc);
var ry3=rx2*sc+ry2*cc;
var rz3=rz2;
mcList[j].cx=rx3;
mcList[j].cy=ry3;
mcList[j].cz=rz3;
per=d/(d+rz3);
mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
mcList[j].y=ry3*per;
mcList[j].scale=per;
mcList[j].alpha=per;
mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
}
doPosition();
depthSort();
}
function depthSort()
{
var i=0;
var aTmp=[];
for(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
function (vItem1, vItem2)
{
if(vItem1.cz>vItem2.cz)
{
return -1;
}
else if(vItem1.cz<vItem2.cz)
{
return 1;
}
else
{
return 0;
}
}
);
for(i=0;i<aTmp.length;i++)
{
aTmp[i].style.zIndex=i;
}
}
function positionAll()
{
var phi=0;
var theta=0;
var max=mcList.length;
var i=0;
var aTmp=[];
var oFragment=document.createDocumentFragment();
// Случайная сортировка
for(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
function ()
{
return Math.random()<0.5?1:-1;
}
);
for(i=0;i<aTmp.length;i++)
{
oFragment.appendChild(aTmp[i]);
}
oDiv.appendChild(oFragment);
for( var i=1; i<max+1; i++){
if( distr )
{
phi = Math.acos(-1+(2*i-1)/max);
theta = Math.sqrt(max*Math.PI)*phi;
}
else
{
phi = Math.random()*(Math.PI);
theta = Math.random()*(2*Math.PI);
}
// Преобразование координат
mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
mcList[i-1].cz = radius * Math.cos(phi);
aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
}
}
function doPosition()
{
var l=oDiv.offsetWidth/2;
var t=oDiv.offsetHeight/2;
for(var i=0;i<mcList.length;i++)
{
aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';
aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';
aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
aA[i].style.opacity=mcList[i].alpha;
}
}
function sineCosine( a, b, c)
{
sa = Math.sin(a * dtr);
ca = Math.cos(a * dtr);
sb = Math.sin(b * dtr);
cb = Math.cos(b * dtr);
sc = Math.sin(c * dtr);
cc = Math.cos(c * dtr);
}</script><style>#div1 {
position:relative;
width:450px;
height:450px;
margin: 20px auto 0;
}
#div1 a {
position:absolute;
top:0px;
left:0px;
font-family: Microsoft YaHei;
color:#fff;
font-weight:bold;
text-decoration:none;
padding: 3px 6px;
}
#div1 a:hover {
border: 1px solid #eee;
background: #000;
}
#div1 .blue {
color:blue;
}
#div1 .red {
color:red;
}
#div1 .yellow {
color:yellow;
}
p {
font: 16px Microsoft YaHei;
text-align: center;
color: #ba0c0c;
}
p a {
font-size: 14px;
color: #ba0c0c;
}
p a:hover {
color: red;
}</style><div id="div1">
<a href=""> Пример 1 </a>
<a href="" class="red"> Пример два </a>
<a href=""> Пример три </a>
<a href=""> Пример </a>
<a href="" class="blue"> Пример </a>
<a href=""> Пример </a>
<a href="" class="red"> Пример </a>
<a href="" class="yellow"> Пример </a>
<a href=""> Пример </a>
<a href="" class="red"> Пример </a>
<a href=""> Пример </a>
<a href="" class="blue"> Пример </a>
<a href=""> Пример </a>
<a href="" class="red"> Пример </a>
<a href="" class="blue"> Пример </a>
<a href=""> Пример </a>
<a href="" class="blue"> Пример </a>
<a href=""> Пример </a>
<a href=""> Пример </a>
<a href="" class="yellow"> Пример </a>
<a href=""> Пример </a>
</div><style>.card-post__gallery {
display: block;
width: 100%;
height: 300px;
}
.card-post__gallery-left {
display: inline-block;
width: 60%;
height: 100%;
}
img {
width: 100%;
display: block;
}
.card-post__gallery-left .image {
height: 100%;
width: 45%;
display: inline-block;
background-color: #0d47a1;
vertical-align: top;
}
.card-post__gallery-left img {
width: 100%;
height: 100%;
}
.card-post__gallery-right {
display: inline-block;
width: 38%;
height: 100%;
vertical-align: top;
}
.card-post__gallery-right .image {
display: block;
width: 100%;
background-color: #0d47a1;
}
</style>ul {
margin: 0;
padding: 0;
list-style: none;
width: 30%;
display: block;
border-bottom: 1px solid #ccc;
}
ul li {
display: block;
width: 100%;
position: relative;
border-bottom: none;
border: 1px solid #ccc;
}
li ul {
position: absolute;
left: 100%;
top: 0;
width: 75%;
display: none;
}
ul li a {
display: block; text-decoration: none; color: #777;
font-size: 16px;
background: #fff;
padding: 5px;
}
ul li a:hover {
color: #E2144A; background: #f9f9f9;
}
li:hover ul {
display: block;
}
.nav {
margin-top: 10px;
}Диета 2
<ul class="nav" id="nav">
<li><a href="#">Понедельник</a>
<ul><li><a href="#">Голодовка</a></li></ul></li>
<li><a href="#">Вторник</a>
<ul>
<li><a href="#">Завтрак</a></li>
<li><a href="#">Обед</a></li>
<li><a href="#">Ужин</a></li>
</ul></li>
<li><a href="#">Среда</a>
<ul>
<li><a href="#">Завтрак</a></li>
<li><a href="#">Обед</a></li>
<li><a href="#">Ужин</a></li></ul></li>
<li><a href="#">Четверг</a>
<ul>
<li><a href="#">Завтрак</a></li>
<li><a href="#">Обед</a></li>
<li><a href="#">Полдник</a></li>
<li><a href="#">Ужин</a></li></ul></li>
<li><a href="#">Пятница</a>
<ul>
<li><a href="#">Голодовка</a></li></ul></li></ul><script>
startList=function(){var nodes=document.getElementById("nav").getElementsByTagName("LI");for(var i=0;i nodes[i].onmouseover=function(){this.className+=" over";}
nodes[i].onmouseout=function(){this.className=this.className.replace(new RegExp(" over\\b"),"");}}}
if(window.attachEvent)window.attachEvent("onload",startList);
</script><div class="blocks">
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
</div>.blocks {
width: 100%;
}
.block {
width: 30%;
display: inline-block;
}
/* Уменьшаем размер экрана.
размер экрана 1026px */
@media screen and (max-width: 1026px) {
.blocks {
width: 80%;
}}
/* При длинне общего блока 80% от всей длинны экрана последнему блоку места не хватает, он спрыгивает вниз. */
/* А при длинне общего блока 50% уже и 2 блоку мало места, и что вам и надо, они дружно выстраиваются один под другим */
@media screen and (max-width: 900px) {
.blocks {
width: 50%;
}
.block {
width: 100%;
}}