Задача: Исправление поведения текстового блока в кнопке
В текущей верстке кнопки текстовый блок растягивается на всю доступную ширину контейнера, что приводит к визуальному дефекту - текст выглядит слишком широким.
Требуемый результат
Необходимо настроить отображение так, чтобы текстовый блок внутри кнопки занимал ширину, равную ширине самой широкой строки текста в этом блоке.
Что нужно сделать
- Проанализировать текущую структуру HTML и CSS.
- Предложить чистое CSS-решение для изменения поведения ширины текстового блока.
- Обеспечить кроссбраузерную совместимость (современные браузеры).
- Решение не должно ломать остальную верстку элемента.
Приоритетные методы
- Использование свойств
display: inline-block, width: fit-content, min-width или аналогичных.
- Решение должно быть максимально лаконичным и эффективным.
Доступна визуальная демонстрация проблемы для наглядности.