Indenting only the first line of text in a paragraph?

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:

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.

Solution 5:

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