Как отступить вторую строку абзаца в CSS: советы и решения

Быстрый ответ

Для создания отступа, начиная со второй строки абзаца, используйте в CSS комбинацию отрицательного text-indent и положительного margin-left:

p {
  text-indent: -1em; // Возвращаемся назад
  margin-left: 1em; // Идем вперед. Находим баланс!
}

Применяя такую комбинацию, мы смещаем все строки кроме первой на 1em влево, а затем сдвигаем весь абзац на тот же интервал вправо, чтобы сохранить общее выравнивание.

Традиционные способы создания выступа при помощи отступов

Выступ, выполненный своими силами

Имитацию выступа, который мы знаем по типографическим правилам, можно получить объединением padding-left и text-indent. Этот подход позволяет отформатировать текст так, что все строки кроме первой, будут "подвешены".

p {
  padding-left: 1em; // Повышаем вместимость пространства
  text-indent: -1em; // Фиксируем первую строку
}

Такой подход позволяет создать отступ для каждой строки, кроме первой, благодаря text-indent, который отменяет смещение только для первой строки.

Подробнее об этом расскажет наш спикер на видео

Создаем отступ для списков

Для создания отступа в элементах списка (li) подойдет комбинация margin-left и отрицательного text-indent:

ul li {
  margin-left: 2em; // Даем дополнительное пространство для маркеров
  text-indent: -2em; // Возвращаем первую строку на место
}

Этот метод обеспечит равномерный отступ для каждого элемента списка и корректное отображение маркеров или чисел.

За пределами обычного: продвинутые методы создания отступов

Создание отступа при помощи изображений

Создание отступов можно осуществлять с помощью картинок. Здесь можно использовать как SVG-графику, так и изображения размером в один пиксель:

p::before {
  content: "";        // Таинственное содержание
  display: inline-block;
  width: 1px;         // Ширина в один пиксель
  height: 1em;        // Высота равна высоте строки
  float: left;        // Обтекаем слева
  margin-left: -1em;  // Возвращаемся на исходную позицию
}

Настройка параметров псевдоэлемента ::before позволяет контролировать размер отступа, что особенно полезно, когда он должен быть независим от ширины родительского блока div.

Идеальное выравнивание по базовой линии при помощи SVG

С помощью SVG можно манипулировать текстом с высокой точностью. Возможность настройки атрибута Y в SVG позволяет тонко регулировать уровень базовой линии:

p::before {
  content: url('indentation-guide.svg');  // Ориентируемся на SVG
  vertical-align: -0.25em;                // Небольшой сдвиг вниз – это то, что нужно
}

Свойство vertical-align помогает выровнять изображение SVG в тексте и настроить высоту базовой линии.

Многострочное выделение жирным шрифтом при помощи обтекания текста

Чтобы первые несколько слов заняли две строки, используйте свойство float:

p::first-line {
  float: left;       // Мы умеем плавать!
  width: 100%;       // Используем все доступное пространство!
  font-weight: bold; // Жирность – наше все
}

Применение этого стиля выделяет первую строку и заставляет последующие строки обходить её, создавая уникальный метод задания отступов.

Визуализация

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

Обычный абзац:
"📗Lorem ipsum dolor sit amet, consectetuer adipiscing elit..."

После применения CSS стиля:
"📗Lorem ipsum dolor
  📘sit amet, consectetuer
  📙adipiscing elit..."

Первая строка остается на своем месте, а отступ 'закладкой CSS' влияет только на последующие строки.

p {
  text-indent: -1em;   // Возвращаемся назад
  padding-left: 1em;   // Идем вперед, сохраняя выравнивание
}

Замечательного свойства 'CSS-закладки' может быть не так заметно, но именно оно делает ваш текст более приятным для восприятия.

Устранение проблем и оптимизация

Обязательство адаптивного дизайна

Не забывайте о необходимости адаптации отступов под разные размеры экрана при помощи медиа-запросов.

Создание кроссбраузерной совместимости

Важно проверять ваши решения в разных браузерах, так как свойства text-indent и float могут работать по-разному.

Поддержка доступности

Следует уделять особое внимание удобству доступа – отступы не должны мешать распознаванию текста или навигации и быть приемлемыми для пользователей с ограниченными возможностями.

Полезные материалы

1. text-indent | CSS-Tricks — Гид по использованию CSS-методик для создания многострочных отступов.
2. Mastering margin collapsing – CSS — Подробное разъяснение явления слияния отступов в CSS.
3. Block formatting context – CSS — Разбор понятия контекста блочного форматирования в CSS, который важен для построения макетов.
4. CSS ::first-line Selector — Описание стилизации первой строки с помощью CSS селектора ::first-line.
5. Newest 'text-indent' Questions – Stack Overflow — Обсуждения на Stack Overflow о проблемах и решениях, связанных с использованием text-indent.
6. Understanding Block Formatting Contexts in CSS — Информация о концепциях контекстов блочного форматирования, влияющих на организацию отступов.
7. CodePen Examples on Indentation — Примеры на CodePen, демонстрирующие практические приемы работы с отступами.