overflow-x: локальное горизонтальное переполнение
overflow-x задаёт обработку содержимого, выходящего за горизонтальные границы элемента.
Назначение
overflow-x задаёт обработку содержимого, выходящего за горизонтальные границы элемента.
Как это работает
auto предоставляет прокрутку при необходимости, hidden обрезает видимое переполнение. Значения двух осей взаимосвязаны: некоторые сочетания visible с прокручиваемой второй осью вычисляются иначе.
Пример
<style>
pre{max-width:28rem;overflow-x:auto;white-space:pre;background:#edf3ef;padding:16px}
</style>
<pre tabindex="0" aria-label="Длинная строка примера"><code>const demonstration = "Эта строка намеренно длиннее узкого контейнера и сохраняет форматирование";</code></pre>Что должно получиться
Длинная строка остаётся одной строкой кода, но её можно прокрутить внутри pre. Другие блоки не обязаны расширяться вслед за примером.
Граница применения и частая ошибка
Не ставьте overflow-x:hidden на всю страницу для сокрытия неизвестной ошибки. Это может сделать кнопки или текст недоступными, оставив причину неправильной ширины без исправления.
Самостоятельная проверка
Поместите длинную строку кода в ограниченный pre. Убедитесь, что прокручивается только пример, а страница помещается в экран; проверьте доступ с клавиатуры.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.