Читаемая статья: ограничение длины строки через ch
Ограничение ширины текстовой колонки помогает читать длинные абзацы на большом экране. Единица ch даёт ориентир, связанный с метрикой символа ноль в текущем шрифте.
Назначение
Ограничение ширины текстовой колонки помогает читать длинные абзацы на большом экране. Единица ch даёт ориентир, связанный с метрикой символа ноль в текущем шрифте.
Как это работает
Max-inline-size ограничивает ширину по строчной оси, а автоматические поля центрируют колонку. На маленьком экране ширина остаётся доступной контейнеру. Отступы и border-box предотвращают неожиданное добавление ширины.
Пример
<style>.reading{box-sizing:border-box;max-inline-size:65ch;margin-inline:auto;padding:16px;line-height:1.75;background:#fff;border:1px solid #ccd6cf}.reading p{margin-block:0 1em}</style>
<article class="reading"><h2>Небольшой учебный текст</h2><p>Длинная строка заставляет взгляд проходить большой путь до следующей. Ограниченная колонка помогает сохранить ритм чтения на широком экране.</p><p>Ширина в ch остаётся ориентиром, а не точным счётчиком букв в каждой строке.</p></article>Что должно получиться
На широком экране текстовая область не растягивается бесконечно. На узком она занимает доступное место с внутренними отступами. Высота блока определяется содержимым, а не фиксируется заранее.
Граница применения и частая ошибка
65ch не означает ровно 65 русских букв: реальная длина зависит от шрифта и текста. Не задавайте фиксированную высоту статье, иначе увеличение масштаба может скрыть окончание. Для длинных URL дополнительно нужны правила переноса.
Самостоятельная проверка
Сравните ширины 45ch, 65ch и 85ch на одном тексте. Увеличьте шрифт и вставьте длинную ссылку. Выберите вариант по читаемости реального материала, а не по одному универсальному числу.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.