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

Question

Как уже отмечалось, это для шаблонов электронной почты, читаемых в почтовых клиентах, таких как gmail, Yahoo Mail, Mail (приложение ios) и т. Д. Из-за этого.Я не могу использовать jQuery, запросы @media урезаны, а также классы.

Так что у меня был фиксированный размер шрифта, но, поскольку в gmail на телефонах ширина меньше, во многих случаях текст становится оболочкойв 2 строки.Я хочу использовать размер шрифта, зависящий от ширины.Поэтому я попытался использовать vw следующим образом:

 <p style="font-family: 'Lato', sans-serif; font-size: 2.5vw;font-weight: bold;line-height: 34px; padding: 0 5%; margin: 5% 0 0 0; color: #24b646;">
        {{title}}
    </p>
</td>

Моя проблема в том, что даже если мой основной вид имеет максимальную ширину 640 пикселей.Чтобы установить размер шрифта, он рассчитывается по всей ширине.

Так что это имеет странный эффект.Даже если само представление имеет размер 640 пикселей, поскольку размер табуляции больше, текст становится больше

От:

До:

Можно ли как-нибудь сделать так, чтобы vw использовал ширину родительского элемента в качестве зависимой переменной?Если нет, что еще я могу использовать, чтобы размер шрифта зависел строго от его родителя?(Либо 640 пикселей - максимальная ширина экрана для ПК, либо для мобильных устройств - ширина экрана)

Answer 1

К сожалению, кажется, что это невозможно в CSS. Взгляните на эти два вопроса:

• Автоматическая настройка размера шрифта для соответствия

• Авторазмер динамического текста для заполнения контейнера фиксированного размера .

Предлагаемые там решения используют JavaScript, который нельзя запустить в почтовом клиенте. Но возможный обходной путь может заключаться в том, чтобы записать текст в изображение SVG и масштабировать его (хотя обычно текст должен быть включен как текст).

CSS Tricks объясняет несколько параметров изменения размера шрифта, последним может быть тот, который вы ищете (используя svg-text).