Aetae

Если шрифт моноширный то какие проблемы то? Высоту ты знаешь ширину ты знаешь. Высоту и ширину символа - тоже знаешь. Соответственно знаешь сколько символов поместится в строке. Берёшь количество символов да считаешь...

Мужик, ты только копировать из фигмы умеешь?
Поменять местами порядок уже выше твоих возможностей?

Вот даже жалуются на это поведение фигмы. Но то что это фигма кривая - тебя не оправдывает.

Чуть более сложно чем нужно тебе:



Упростишь сам, если надо.)

https://vuetifyjs.com/en/features/sass-variables/#...

Лучше сразу на React. React - не Vue, он не html-совместим, придётся бессмысленно тратить время ещё и на перекорячивание.

Очевидно: не использовать overflow: hidden на контейнере, не класть в контейнер c overflow: hidden, добавить больше внутренних отступов контейнеру с overflow: hidden...

Для тех, кто нихрена не видит на картинке автора:

Какие-то конкретные древние приёмы и техники "вёрстки на флоатах" - знать не надо.
Как работает флоат - знать надо. Необходимость обтекания никуда со временем не делась.

Если точные пиксели не важны, то юзай vertical-align: super; и всё.

Обычно этот подобный класс добавляют библиотеки всплывающих окон(модальных диалогов) при всплытии.
Если вы сами ничего не подключали - возможно виновата всплывающая реклама, просто сама по себе кривая или которую (не полностью) зарезал блокировщик.
Если сайт ваш и рекламы вы тоже не подключали - она могла пролезть от доброго провайдера, коли подключены любые внешние скрипты по http, или из вредоносного расширения в вашем браузере.

/убрал гадальный шар

Примерно так: