Блог

ПРЕДВАРИТЕЛЬНЫЙ КОНТЕКСТ : В photoshop я могу выбрать текстовый слой и «преобразовать», чтобы растянуть (или масштабировать) текст по вертикали и горизонтали, чтобы он поместился внутри прямоугольника……… почему мы не можем просто выполнить простую css-растяжку текста по горизонтали или вертикали ?????

КОНТЕКСТ : Несколько Div с фиксированной шириной и высотой <div style="width:300px;height:100px;">text</div> в верхнем меню на каждой странице

ЧТО Я ХОЧУ (1) : Решение Css, чтобы текст всегда помещался в div фиксированного размера

ЧТО я ХОЧУ (2) : То же поведение, что и при отображении flex, где мы можем применять fly-grow для подэлементов, но обычный flex не изменяет размер шрифта

ЧТО Я ХОЧУ (3) : возможность растягивания по горизонтали или вертикали отдельно

ЧТО МНЕ НЕ НУЖНО {1} : Я не хочу никаких решений Javascript или jquery, потому что это блокировка рендеринга

ЧЕГО Я НЕ ХОЧУ {2} : изменение шрифта при изменении размера окна

ЧТО Я ПРОБОВАЛ [0] : Основной раздел Flex

 border: 2px solid red;
display: flex;
width: 300px;
height: 300px;
overflow: hidden;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: stretch;
 

подпункты

 flex-grow: 1;
 

ЧТО я ПРОБОВАЛ [1] : font-size:5vh; => это будет соответствовать только ширине окна/окна просмотра или высоте окна/окна просмотра

ЧТО я ПРОБОВАЛ [2] : Я переделал эту статью https://css-tricks.com/fitting-text-to-a-container/ но это указывает ТОЛЬКО на решения javascript. Повторный расчет на каждой странице ужасен для моих пользователей.

ЧТО я ПРОБОВАЛ [3] : font-stretch:.... но он работает только с очень небольшим количеством шрифтов, не со всеми, и он очень ограничен, нет реального выбора для растягивания букв по горизонтали или вертикали.

ЧТО Я ПРОБОВАЛ [4] : transform:scale(1.5); => div исчезает

ЧТО я ПРОБОВАЛ [5] : zoom:2; => не могу контролировать x и y =>> он применяет его по горизонтали вертикали одинаковое значение 🙁

ВОПРОС : Есть ли более приятный способ добиться этого, как в photoshop ?