Отступать только первую строку текста в абзаце? - PullRequest
Новая
       47

Отступать только первую строку текста в абзаце?

50 голосов
/ 02 мая 2011

У меня есть несколько абзацев, которые я хотел бы сделать отступ, хотя только первые строки этих абзацев.

Как бы я нацелил только первые строки, используя CSS или HTML?

Ответы [ 8 ]

156 голосов
/ 02 мая 2011

Используйте свойство text-indent. 

p { 
   text-indent: 30px;
}

jsFiddle .

29 голосов
/ 02 мая 2011

Помимо текстового отступа, вы можете использовать селектор :first-line, если хотите применить дополнительные стили. 

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

http://jsfiddle.net/Madmartigan/d4aCA/1/

12 голосов
/ 02 мая 2011

Очень просто, используя css: 

p {
    text-indent:10px;
}

Создает отступ в 10 пикселей в каждом абзаце.

4 голосов
/ 24 мая 2014

У меня также была проблема с получением первой строки абзаца (только первой строки) для отступа, и я пробовал следующий код: 

p::first-line { text-indent: 30px; }

Это не сработало.Итак, я создал класс в своем CSS и использовал его в своем html следующим образом:

в CSS: 

.indent { text-indent: 30px; }

в html: 

<p class="indent"> paragraph text </p>

Это сработалоКак колдовство.Я до сих пор не знаю, почему не работал первый пример кода, и я позаботился о том, чтобы текст не был выровнен.

1 голос
/ 08 января 2013

Вот, пожалуйста: 

p:first-line {
    text-indent:30px;
}

Не нашел четкого ответа для новичка в CSS, поэтому вот простой.

0 голосов
/ 11 апреля 2018

Другие упомянули лучший способ реализовать это с помощью CSS, однако, если вам нужно быстрое исправление со встроенным форматированием, просто используйте следующий код: 

<p style="text-indent: 40px">This text is indented.</p>

Источник: https://www.computerhope.com/issues/ch001034.htm

0 голосов
/ 10 октября 2013

первый отступ всех строк (1), затем первый строки (2) 

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
0 голосов
/ 01 февраля 2013

Я столкнулся с той же проблемой, только у меня было несколько тегов <p>, с которыми мне приходилось работать. При использовании свойства text-indent хотел сделать отступ ВСЕХ тегов <p>, а это не то, что я хотел.

Я хотел добавить изображение необычной цитаты в список отзывов, с фоновым изображением css в самом начале каждой цитаты и текстом справа от изображения. Поскольку text-indent заставлял отступать все последующие абзацы, а не только первый абзац, мне пришлось немного обойтись. Тот же метод применяется, если вы не хотите делать изображение.

Я выполнил это, сначала добавив пустой div в начало абзаца, который хотел выделить. Затем я применил к нему небольшую ширину и высоту, чтобы создать невидимое поле, и, наконец, применил левый плавающий элемент, чтобы он совмещался с текстом. Если вы используете это для изображения, обязательно добавьте поле справа или увеличьте ширину для некоторого пробела.

Вот пример с встроенным CSS. Вы можете легко создать класс и добавить его в свой файл CSS: 

<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
...