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

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

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

44
css html indentation target text-indent

8 ответов

использовать text-indent собственность.

p { 
   text-indent: 30px;
}

jsFiddle.

141

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

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

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

25

очень просто с помощью css:

p {
    text-indent:10px;
}

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

10

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

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

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

в CSS:

.indent { text-indent: 30px; }

в html:

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

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

4

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

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

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

1

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

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

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

-1

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

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

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

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

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

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

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