Как сделать, чтобы текст внутри блока масштабировался и не выходил за нижний край?

Question

[denis_lunochkin]

Здравствуйте, возникла загвоздка при создании сайта engclass74.ru , как сделать, чтобы текст, например внутри блока цена при масштабировании не выходил за края. Если есть готовые решения, подскажите, если нет, выложу код, подскажите что и как. Заранее спасибо

Answer 1

[Сергей delphinpro]

Скролл добавьте и всё.

UPD

Добавлю еще вариант. Выставляете минимальный масштаб, выбираете размер шрифта, чтобы текст помещался (пусть для примера будет 12px).
Записываете это
font-size: 12px;

Затем ставите максимальный масштаб, опять подгоняете шрифт, пусть для примера будет 20px при ширине экрана 1920px. Разница между размерами 20px - 12px = 8px

Выражаем эту величину в единицах вьюпорта
8px * 100vw / 1920px = 0.42vw

B записываем еще одно правило
font-size: calc(12px + 0.42vw);

Теперь размер шрифта будет зависеть от ширины вьюпорта, Чем больше вьюпорт, тем крупнее шрифт.

Чтобы не делать все вычисления вручную, можно написать парочку функций для sass:

@function vw($pixel, $defaultWidth: 1920px) {
    @return $pixel * (100 / $defaultWidth) * 1vw;
}

@function calcVw($minPixel, $pixel) {
    $addPixel: vw($pixel - $minPixel);
    @return #{"calc(#{$minPixel} + #{$addPixel})"};
}

@mixin fontSizeAdaptive($minPixel, $pixel) {
    font-size: $minPixel;
    font-size: calcVw($minPixel, $pixel);
}

Использовать просто:

.selector {
       @include fontSizeAdaptive(12px, 20px);
}

Answer 2

[trushka]

Сделайте эти блоки display: inline-block; vertical-align: top, а у родителя - text-align: center. Тогда при уменьшении ширины окна они просто станут в 3 строчки

Comments

[denis_lunochkin]

Заказчику нужно именно такое отображение, да и дизайнерская идея такова, что если делать по предложенной вами идее, то выглядеть будет неказисто, т.к блоки разного размера