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

Question

введите описание изображения здесь Текст внутри кнопки выходит за пределы кнопки. Можно ли в любом случае сделать масштаб текста в зависимости от размера кнопки / экрана? Я уже пытался сделать авто и поиск YouTube и Google. Также используется медиа-запрос.

Я уже пробовал делать авто и искать YouTube и Google.

@media(min-width: 400px) {
    .purplebutton {
        min-width: 350px;
    }
    .buttontext {
        font-size: 16px;

    }
}
@media(min-width: 600px) {
    .purplebutton {
        min-width: 450px;
    }
    .buttontext {
        font-size: 17px;

    }
}

@media(min-width: 800px) {
    .purplebutton {
        min-width: 550px;

    }
    .buttontext {
        font-size: 20px;

    }
}

Ожидаемый результат - текст, который помещается внутри кнопки, а размер шрифта настраивается в соответствии с.

Фактический результат - текст выходит за пределы кнопки

Answer 1

Попробуйте использовать свойство слова-разрыва для кнопки следующим образом: слово-разрыв: разбить все;

Answer 2

Вместо использования абсолютных единиц измерения (px) для font-size используйте относительный размер шрифта, например em, rem или vw.