Не делайте отступ в первой строке первого абзаца, используя CSS - PullRequest
1 голос
/ 02 апреля 2020

Как можно предотвратить отступ строки для первого абзаца в разделе?

Это очень распространено для многих форматов c.

Пример вывода

Введение

Для первого абзаца в разделе нет отступа: Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit, Sed Do EiusMod Tempor Incididunt U Labore et Dolore Magna Aliqua. В ЕС Mi Bibendum neque Egestas спорить. Arcu cursus vitae congue mauris rhoncus aenean vel elit.

Для всех следующих параграфов в текстовом отступе установлен отступ: Sed velit dignissim sodales ut. Монахиня c pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augu neque gravida in fermentum et sollicitudin c.

Для всех следующих абзацев есть отступ, установленный текстовым отступом: Монахиня c sed id semper risis в hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Сагиттис и биография.

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

p {
  text-indent: 50px;
}

Ответы [ 2 ]

3 голосов
/ 02 апреля 2020

Возможно, вы захотите использовать псевдокласс css 'first-of-type'

p:first-of-type {
  text-indent: 0;
}

Поскольку селектор css подразумевает, что стиль будет применяться только к первому элементу p.

1 голос
/ 02 апреля 2020

Вы можете использовать CSS Комбинированный соседний брат или сестра , например:

p + p {
  text-indent: 50px;
}

Запустите код, чтобы увидеть результат

p + p {
  text-indent: 50px;
}
<h1>Introduction</h1>

<p>For the first paragraph in the section, there is no indent: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. A arcu cursus vitae congue mauris rhoncus aenean vel elit.</p>

<p>For all following paragraphs, there is an indent set by text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.</p>

<p>For all following paragraphs, there is an indent set by text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Sagittis vitae et leo duis ut.</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...