Indenting only the first line of text in a paragraph?

Question

I have several paragraphs that I would like to indent, although only the first lines of these paragraphs.

How would I target just the first lines using CSS or HTML?

Solution 1

Use the text-indent property.

p { 
   text-indent: 30px;
}

jsFiddle.

Solution 2

In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles.

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

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

Solution 3

Very simple using css:

p {
    text-indent:10px;
}

Will create an indentation of 10 pixels in every paragraph.

Solution 4

Others have mentioned the best way to implement this via CSS, however if you need a quick fix with inline formatting, simply use the following code:

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

Source: https://www.computerhope.com/issues/ch001034.htm

Solution 5

I was also having a problem getting the first line of a paragraph (only the first line) to indent and was trying the following code:

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

This did not work. So, I created a class in my CSS and used it in my html as follows:

in CSS:

.indent { text-indent: 30px; }

in html:

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

This worked like a charm. I still don't know why the first code example did not work and I did make sure that the text was not aligned.

View more solutions

Comments

[paulotorrens]

I get really sad when I see an answer here on Stackoverflwo that helps me, but the OP didn't accept it... sorry, bro. You deserved it.

[Erik]

The first one doesn’t work because ::first-line is a pseudo-element on which only a subset of CSS-properties can be applied. text-indent is not one of them. See developer.mozilla.org/en-US/docs/Web/CSS/::first-line

[Erik]

:first-line doesn’t work, because the text-indent-property has no effect on it. Without the pseudo-element for p, there’s no problem. The text-indent-property does only intend the first line anyway. So there’s no reason to target only one line in the first place. See also: developer.mozilla.org/en-US/docs/Web/CSS/::first-line and developer.mozilla.org/en-US/docs/Web/CSS/text-indent

[MicroMachine]

Seems that the user stopped using S.E. less than a month after this was asked or disappeared.

[Jean-François Corbett]

This is identical to the accepted answer, except adding the bad practice of inlining style in HTML tags...

[Kellen Stuart]

@paulotorrens the accepted answer should be the one with the most upvotes because it helps the majority and not just OP

[Quidam]

@paulotorrens The accepted answer is good with the OP choice. Why sad? It's not that important. The important thing is the answer is upvoted, to make it clear to everyone it's a good and useful answer.

[Rodrigo]

That's for the other lines. For the first line, use just text-indent.