Длинный код: прокрутка внутри примера без расползания страницы

Назначение

Длинная строка кода может расширить всю страницу и затруднить чтение на телефоне. Отдельная область прокрутки сохраняет исходные переносы и ограничивает проблему рамками примера.

Как это работает

Pre сохраняет пробелы, overflow-x:auto включает прокрутку при необходимости. Min-width:0 помогает, если блок находится внутри Grid или Flexbox. Для явно фокусируемой области задайте понятное имя и видимый контур.

Пример

<style>.code-frame{min-width:0;max-width:100%;overflow-x:auto;padding:1rem;background:#edf5ef;box-sizing:border-box}.code-frame:focus-visible{outline:3px solid #176b50;outline-offset:2px}</style>
<p id="code-title">Пример длинного вызова; область можно прокручивать горизонтально.</p>
<pre class="code-frame" tabindex="0" role="region" aria-labelledby="code-title"><code>const message = buildLearningMessage({ title: "Длинное название учебного материала", includeExamples: true, locale: "ru" });</code></pre>

Что должно получиться

В узком контейнере прокручивается пример, а не весь документ. Строка является демонстрационным кодом: функция buildLearningMessage здесь не определена и не выполняется.

Граница применения и частая ошибка

Не заставляйте пользователя прокручивать каждый короткий блок без необходимости. Лишние tabindex увеличивают число остановок, поэтому решение нужно проверять на реальном документе. Альтернативой может быть перенос строк, если он не искажает учебный смысл.

Самостоятельная проверка

Уменьшите окно, перейдите к области клавишей Tab и проверьте прокрутку с клавиатуры в целевых браузерах. Затем скопируйте строку в редактор: декоративное оформление не должно добавлять символы в код.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Клавиатурная проверка
• Видимый фокус
• Адаптивность