Практика: кнопка с длинной подписью без обрезки
Длинная подпись кнопки должна оставаться читаемой на узком экране и при увеличении шрифта. В упражнении высота зависит от содержимого, а текст может переходить на следующую строку.
Назначение
Длинная подпись кнопки должна оставаться читаемой на узком экране и при увеличении шрифта. В упражнении высота зависит от содержимого, а текст может переходить на следующую строку.
Как это работает
Используйте нативный button и явный type. Ограничьте максимальную ширину и разрешите перенос. В примере кнопка показывает только оформление: обработчик действия к ней не подключён.
Пример
<style>.long-action{font:inherit;line-height:1.4;white-space:normal;overflow-wrap:anywhere;max-width:100%;width:19rem;padding:.8rem 1rem;border:2px solid #236c47;border-radius:.5rem;background:#e2f0e7;color:#173d29}.long-action:focus-visible{outline:3px solid #174ea6;outline-offset:3px}</style>
<button class="long-action" type="button">Проверить разметку учебной страницы перед публикацией</button>Что должно получиться
Текст занимает столько строк, сколько требуется, и кнопка увеличивается по высоте. Доступное имя берётся из полной подписи, а фокус заметен отдельно от рамки.
Граница применения и частая ошибка
Фиксированная маленькая высота и text-overflow могут скрыть смысл действия. Не уменьшайте шрифт автоматически до нечитаемого размера ради одной строки. При настоящем действии учитывайте состояние ожидания и ошибку, но не меняйте значение кнопки без объяснения.
Самостоятельная проверка
Увеличьте масштаб до 200% и замените подпись более длинной. Проверьте Tab и нажатие пробела на своей странице после подключения безопасного обработчика. Убедитесь, что соседние элементы не перекрывают кнопку.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.