Строки, налезающие друг на друга на веб-странице, чаще всего появляются после установки position: absolute или слишком малого значения line-height — элементы вырываются из потока документа и перестают «знать» о соседях. В текстовых редакторах вроде Microsoft Word симптом выглядит иначе: абзацы слипаются из-за точного межстрочного интервала, заданного в пунктах, который не масштабируется вместе со шрифтом.
Проблема встречается в трёх типичных средах: при вёрстке сайтов, при работе с документами и при просмотре страниц в браузере. В каждом случае диагностика своя, и универсального «лечения» не существует. Ниже разберём, как определить источник наложения и устранить его безопасными способами — без переписывания всего кода или документа с нуля.
Как определить, где именно возникло наложение
Прежде чем что-то исправлять, нужно ответить на простой вопрос: где вы видите наложенный текст? От этого зависит весь дальнейший порядок действий.
- 🌐 В браузере на чужом сайте — скорее всего, проблема на стороне сайта или вызвана масштабированием страницы, расширениями, заменой шрифтов.
- 💻 В вашей собственной вёрстке — причина почти всегда в CSS: позиционирование, отрицательные отступы,
line-height. - 📄 В документе Word или PDF — проверяйте межстрочный интервал, обтекание объектов и настройки абзаца.
- 📱 Только на мобильном устройстве — вероятно, текст не помещается в контейнер фиксированной ширины или высоты.
Быстрая проверка для веб-страницы: откройте её в другом браузере или в режиме инкогнито без расширений. Если наложение исчезло — виновато ваше локальное окружение, а не код страницы.
Наложение текста в CSS: основные причины
В вёрстке наслаивание строк и блоков — следствие того, что элементы лишились естественного потока. Разберём самые частые виновники.
Абсолютное и фиксированное позиционирование. Элемент со свойством position: absolute или position: fixed перестаёт занимать место в документе, и соседние блоки сдвигаются на его позицию. Если таких элементов несколько и их координаты пересекаются, текст накладывается друг на друга.
Слишком маленький line-height. Когда межстрочный интервал меньше размера шрифта — например, line-height: 0.8 при крупном тексте — строки буквально залезают одна на другую. Особенно заметно это у шрифтов с длинными выносными элементами.
Отрицательные margin и фиксированная высота. Отрицательный отступ margin-top: -20px намеренно сдвигает блок вверх, а контейнер с жёстко заданным height и overflow: hidden обрезает содержимое, которое визуально «выползает» на соседей при увеличении шрифта.
Исправление наложения в вёрстке: пошагово
Начинайте с безопасных проверок, которые ничего не ломают. Откройте инструменты разработчика (клавиша F12 в большинстве браузеров), выделите проблемный элемент и посмотрите в панели стилей, какие свойства к нему применены. Подсвеченные перечёркнутые правила покажут, что переопределяется.
☑️ Диагностика наложения текста в CSS
Дальше действуйте по найденной причине:
- 🔧 Если виноват
position: absolute— добавьте родителюposition: relativeи скорректируйте координатыtop/left, либо вовсе замените абсолютное позиционирование на flexbox или grid. - 📏 Если строки слипаются — увеличьте
line-height. Безопасный ориентир для основного текста — значение около1.4–1.6без единиц измерения. - ↔️ Если мешает отрицательный
margin— уберите его или компенсируйте отступом соседнего блока. - 📦 Если контейнер обрезает текст — замените фиксированный
heightнаmin-height, чтобы блок мог растягиваться.
p {
line-height: 1.5;
position: static;
}
⚠️ Внимание: свойство z-index управляет только порядком перекрытия, но не устраняет само наложение. Подняв один текст над другим, вы просто решите, какой из них будет читаемым, — проблема вёрстки при этом останется.
Наложение текста в Word и других редакторах
В Microsoft Word строки чаще всего слипаются из-за межстрочного интервала, заданного режимом «Точно» с малым значением в пунктах. Такой интервал не подстраивается под размер шрифта: стоит увеличить кегль — и буквы начинают залезать друг на друга. Проверить это можно через Главная → Абзац → Межстрочный интервал и переключить режим на «Одинарный» или «Множитель».
Вторая типичная причина — объекты с обтеканием. Картинка, фигура или надпись с параметром обтекания «За текстом» или «Перед текстом» накладывается на абзацы намеренно, и при сдвиге документа это выглядит как случайное наложение. Выделите объект и проверьте его положение через Формат → Обтекание текстом.
Ещё один сценарий — скопированный из интернета фрагмент, который принёс с собой скрытое форматирование. В таком случае помогает выделить текст и сбросить форматирование кнопкой «Очистить все форматирование» на вкладке «Главная», после чего задать стили заново.
Наложение на чужом сайте: что может пользователь
Если текст наслаивается на сайте, который вы не контролируете, исправить код вы не сможете, но проверить локальные факторы стоит. Начните с масштаба страницы: сочетание Ctrl + 0 возвращает масштаб к стандартному значению. Нестандартный зум нередко ломает вёрстку с фиксированными размерами блоков.
Далее — расширения браузера. Блокировщики рекламы, темы оформления, расширения для чтения и замены шрифтов вмешиваются в стили страниц. Откройте сайт в режиме инкогнито: если наложение пропало, отключайте расширения по одному, чтобы найти виновника.
Почему помогает очистка кэша
Браузер может хранить устаревшую версию CSS-файла сайта, которая конфликтует с обновлённой HTML-разметкой. Принудительное обновление страницы сочетанием Ctrl+F5 загружает стили заново и часто устраняет визуальные артефакты, включая наложение текста.
Сравнение причин и решений по средам
| Среда | Типичная причина | Способ исправления |
|---|---|---|
| CSS-вёрстка | position: absolute / fixed | Корректировка координат или переход на flex/grid |
| CSS-вёрстка | Малый line-height | Увеличить до ~1.4–1.6 без единиц |
| Word | Интервал «Точно» в пунктах | Сменить на «Одинарный» или «Множитель» |
| Word | Объект с обтеканием | Изменить режим обтекания или положение объекта |
| Браузер (чужой сайт) | Масштаб, расширения, кэш | Ctrl+0, инкогнито, Ctrl+F5 |
⚠️ Внимание: не пытайтесь «вылечить» наложение в вёрстке добавлением новых отступов и z-index поверх старых правил. Так образуются слои костылей, которые сломаются при первом изменении контента. Найдите корневое свойство-виновник и исправьте именно его.
Когда наложение задумано специально
Стоит оговориться: иногда перекрытие текста — намеренный дизайнерский приём. Заголовок, частично наезжающий на фотографию, или декоративная надпись поверх блока делаются через position: absolute внутри контейнера с position: relative либо через отрицательные отступы. Если вы редактируете чужой макет, сначала убедитесь, что наложение — это ошибка, а не часть дизайна.
Отличить задуманное перекрытие от бага несложно: намеренный эффект выглядит аккуратно при любом размере окна, а ошибочное наложение «плывёт» при изменении ширины экрана, масштаба или шрифта. Потяните окно браузера за край — и картина прояснится.
⚠️ Внимание: при копировании текста из PDF в Word или на сайт символы могут наложиться из-за переноса скрытых управляющих символов и нестандартных шрифтов. Если текст «съезжает» только у вставленного фрагмента, вставляйте его через «Вставить как текст без форматирования».
Часто задаваемые вопросы
Почему текст накладывается только на мобильном телефоне?
На узком экране длинные слова и строки не помещаются в контейнеры фиксированной ширины или высоты. Проверьте, не заданы ли блокам жёсткие width и height, и добавьте адаптивные правила через медиазапросы. Также убедитесь, что line-height задан относительным значением, а не в пикселях.
Поможет ли z-index исправить наложение текста?
Нет. Свойство z-index лишь определяет, какой элемент отображается поверх другого при перекрытии. Сами элементы остаются на тех же позициях. Чтобы устранить наложение, нужно менять позиционирование, отступы или межстрочный интервал.
Строки слиплись в Word после увеличения шрифта. Что делать?
Откройте настройки абзаца: Главная → Абзац → Межстрочный интервал. Если там выбран режим «Точно» с фиксированным значением в пунктах, переключите на «Одинарный» или «Множитель» — интервал начнёт подстраиваться под размер шрифта автоматически.
Наложение видно только при печати, на экране всё нормально. Почему?
При печати браузеры и редакторы применяют отдельные стили и пересчитывают размеры шрифтов. Проверьте предварительный просмотр печати, отключите фоновые изображения и убедитесь, что в CSS нет конфликтующих правил для @media print, если речь о веб-странице.
Как быстро найти, какое CSS-правило вызывает наложение?
Откройте инструменты разработчика клавишей F12, выделите проблемный элемент и по очереди отключайте применённые к нему стили галочками в панели Styles. Как только текст встанет на место, последнее отключённое свойство — причина наложения.