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

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

Как мне настроить таргетинг только на первые строки с помощью CSS или HTML?

Ответ 1

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

p { 
   text-indent: 30px;
}

jsFiddle.

Ответ 2

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

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

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

Ответ 3

Очень просто использовать css:

p {
    text-indent:10px;
}

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

Ответ 4

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

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

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

в CSS:

.indent { text-indent: 30px; }

в html:

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

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

Ответ 5

Здесь вы идете:

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

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

Ответ 6

первый отступ всех строк (1), чем outdent первая строка (2)

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */

Ответ 7

Я столкнулся с одной и той же проблемой только с несколькими тегами <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>