Практика: длинный идентификатор кода внутри абзаца
Короткие фрагменты code часто располагаются прямо в тексте статьи. Длинное имя может растянуть страницу, поэтому для него нужно отдельно определить правила переноса, сохранив исходные символы.
Назначение
Короткие фрагменты code часто располагаются прямо в тексте статьи. Длинное имя может растянуть страницу, поэтому для него нужно отдельно определить правила переноса, сохранив исходные символы.
Как это работает
White-space:normal разрешает обычный перенос, overflow-wrap:anywhere допускает разрыв длинного фрагмента при нехватке места. CSS меняет отображение, но не вставляет дефисы или пробелы в копируемый код.
Пример
<style>.code-paragraph{max-width:24rem;line-height:1.7}.code-paragraph code{white-space:normal;overflow-wrap:anywhere;background:#e9f1ec;padding:.1em .2em}</style>
<p class="code-paragraph">В учебном примере используется идентификатор <code>lessonPublicationValidationResult</code>. Его написание должно сохраниться при копировании.</p>Что должно получиться
На узкой области длинный идентификатор переносится, не создавая горизонтального переполнения всего абзаца. Обычный текст вокруг него продолжает читаться последовательно.
Граница применения и частая ошибка
Не применяйте это правило ко всем pre без анализа: в многострочном коде пробелы и выравнивание могут иметь смысл. Не вставляйте ручные пробелы в идентификаторы ради визуального переноса. Для большого примера лучше отдельный блок кода.
Самостоятельная проверка
Сузьте область и скопируйте идентификатор в текстовый редактор. Проверьте, что он остался одной последовательностью символов. Затем сравните с pre и объясните, почему для него может быть нужна горизонтальная прокрутка.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.