Свойство max-width: предел ширины
Как удерживать читаемую длину строки и не мешать блоку сжиматься на телефоне.
Как это работает
max-width задаёт верхний предел ширины. Это удобно для статьи: на большом экране строки не становятся бесконечно длинными, а на маленьком блок продолжает сжиматься. Для центрирования ограниченной области добавьте автоматические горизонтальные margin.
Единица ch примерно связана с шириной символа 0 текущего шрифта и иногда удобна для текстовой колонки. Это ориентир, а не точное количество букв в строке. Для изображений max-width: 100% обычно сочетают с height: auto.
Пример в интерфейсе
.text { max-width: 55ch; margin-inline: auto; padding: 20px; background: #eaf4ee; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| max-width: 65ch | Ограничение текстовой колонки. |
| max-width: 100% | Не шире родительского контейнера. |
| none | Отсутствие верхнего ограничения. |
На что обратить внимание
Слишком большой min-width может помешать ожидаемому сжатию, даже если max-width кажется корректным. Проверяйте оба ограничения.
Проверьте на практике
Попробуйте пределы 40ch и 70ch на длинном абзаце. Сравните чтение на широком и узком экране.
Связанные темы: width, line-height.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.