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

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

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


html css indentation target text-indent
person Miles Henrichs    schedule 02.05.2011    source источник
comment
@ Рикардо - К сожалению, нет. Пометка ответа как ответ дается исключительно лицу, задавшему вопрос, и власть имущие не намерены это менять. Что касается их, то ради того, чтобы другие столкнулись с вопросом, для этого и предназначена система голосования (в основном ответ, получивший наибольшее количество голосов, является выбором сообщества).   -  person Shauna    schedule 13.02.2013
comment
Почему вы не принимаете ответ? Здесь есть несколько хороших.   -  person jeremyjjbrown    schedule 27.01.2014

Ответы (8)


arrow_upward
174
arrow_downward

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

p { 
   text-indent: 30px;
}

jsFiddle.

person alex    schedule 02.05.2011
comment
Мне очень грустно, когда я вижу здесь, на Stackoverflwo, ответ, который мне помогает, но ОП не принял его... извини, братан. Вы это заслужили. - person paulotorrens; 26.11.2013
comment
Похоже, пользователь перестал использовать S.E. менее чем через месяц после того, как это было задано или исчезло. - person MicroMachine; 27.01.2017
comment
@paulotorrens принятый ответ должен быть ответом с наибольшим количеством голосов, потому что он помогает большинству, а не только OP - person Kellen Stuart; 30.08.2018
comment
@paulotorrens Принятый ответ хорош с выбором OP. Почему грустный? Это не так важно. Важно то, что за ответ проголосовали, чтобы всем было ясно, что это хороший и полезный ответ. - person Quidam; 31.05.2019

arrow_upward
33
arrow_downward

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

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

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

person Wesley Murch    schedule 02.05.2011

arrow_upward
12
arrow_downward

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

p {
    text-indent:10px;
}

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

person Shay Ben Moshe    schedule 02.05.2011

arrow_upward
4
arrow_downward

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

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

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

в CSS:

.indent { text-indent: 30px; }

в html:

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

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

person Wayne    schedule 23.05.2014
comment
Первый не работает, потому что ::first-line — это псевдоэлемент, к которому можно применить только подмножество CSS-свойств. text-indent не один из них. См. developer.mozilla.org/en-US/docs. /Web/CSS/::first-line - person Erik; 19.06.2015

arrow_upward
2
arrow_downward

Ну вот:

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

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

person PaulBGD    schedule 07.01.2013
comment
:first-line не работает, потому что свойство text-indent на него не влияет. Без псевдоэлемента для p нет проблем. В любом случае свойство text-indent предназначено только для первой строки. Таким образом, нет причин нацеливаться только на одну строку. См. также: developer.mozilla.org/en-US /docs/Web/CSS/::first-line и developer.mozilla.org/en-US/docs/Web/CSS/text-indent - person Erik; 19.06.2015

arrow_upward
1
arrow_downward

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

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

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

person Ibrahim Conway    schedule 11.04.2018
comment
Это идентично принятому ответу, за исключением добавления плохой практики встраивания стиля в теги HTML... - person Jean-François Corbett; 11.04.2018

arrow_upward
-3
arrow_downward

Я столкнулся с той же проблемой, только у меня было несколько тегов <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>
person Phil    schedule 01.02.2013

arrow_upward
-3
arrow_downward

сначала сдвинуть все строки (1), затем сдвинуть первую строку (2)

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
person Aromapark Media    schedule 10.10.2013