Я создаю диаграмму, которая показывает команды клавиатуры, наложенные поверх изображения клавиатуры.Я хотел бы, чтобы текст уменьшался до размера контейнера, если он слишком длинный, чтобы поместиться внутри ключа, но в противном случае остался бы размером по умолчанию.Как бы я сделал это в HTML?Решения, которые я видел, кажутся всегда изменяющими размер текста, по сравнению с только , когда контейнер слишком мал.Спасибо.
Вот пример того, как может выглядеть результат:
Вы можете использовать что-то вроде переноса по словам или переполнения или добавления переменной с помощью css (то есть: размер шрифта, который соответствует вашим потребностям) и изменять его только тогда, когда медиа-запросы (которые вы установили) возвращают true;
Объяснение медиазапросов :
Допустим, я установил эту переменную
:root { --font-size: 16px; /* this is your regular font size that you will use in your entire document */ }
Итак, при заданном размере экрана примерно так:
@media screen and (device-width: 320px) and (orientation: portrait) { :root { --font-size: 12px; } }
Вы просто изменяете значение переменной, и оно будет меняться везде, где вы использовали эту конкретную переменную
Если вы не знаете, как это работает, вы можете использовать эти переменные css, как этот
.someClass { font-size: var(--font-size); */ and that's it :) */ /* You can also make calculations like this */ font-size: calc(var(--font-size) - 40%); }
Ссылка:
Переливная упаковка: https://css -tricks.com / almanac / properties / o / Переливная упаковка /
перенос слов: https://css -tricks.com / almanac / properties / w / word-break /
переменные css: https://www.madebymike.com.au/writing/using-css-variables/
mediaзапросы: https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/