та ебал я такие расследования

что значит скинули выше. насчет остального вот тебе новый скрин )

я захардкодил чайлда. убрать надо и джсом считать какой из айтемов будет последним в колонке и вешать на него инлайн стиль break-after: column;

как сделать лимит? чтобы типо было  после слов...

👆вверху лучшее решение на мой взгляд

А ну да

ребят, я анимировал текст через сss чтобы он бегущей строкой ездил вправо-влево в 4 строки, но есть проблема что скорость анимации неравномерная, будто чем длиннее текст тем быстрее анимация, как скорость выровнять?

покажи как сделал? может достаточно тайминг заменить на linear? ))

а. не. херня наверно

чет заебся я. пойду отдыхать. ну вас )

<div class="container">
    <div class="scrolling">
   Вирусность.
 </div>
     <div class="scrolling" aria-hidden="true">
   Вирусность.
 </div>
 <div class="scrolling" aria-hidden="true">
   Вирусность.
 </div>
 <div class="scrolling" aria-hidden="true">
   Вирусность.
 </div>
 <div class="scrolling" aria-hidden="true">
   Вирусность.
 </div>
 <div class="scrolling" aria-hidden="true">
   Вирусность.
 </div>
 <!-- … -->
</div>

selector .container {
 overflow: hidden;
 white-space: nowrap;
}

selector .scrolling {
 animation: marquee 5s linear infinite;
 display: inline-block;
 padding-right: 20px;
 font-family: Raleway;
font-style: normal;
font-weight: bold;
font-size: 50px;
line-height: 59px;

color: #000000;

}

@keyframes marquee {
 from {
   transform: translateX(0);
 }
 to {
   transform: translateX(-100%);
 }
}

что-то не совсем работает https://codepen.io/andrev_markelov/pen/gOmxEpz

Есть такой тэг marquee https://caniuse.com/?search=marquee

<style>
.text__box {
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
-ms-line-clamp: 2;
-webkit-line-clamp: 2;
line-clamp: 2;
display: -webkit-box;
display: box;
word-wrap: break-word;
-webkit-box-orient: vertical;
box-orient: vertical;
}
</style>

разве он не устарел?

спасибо