How can I indent all text in a paragraph except the first line?

Question

This is an example fiddle .

What I'm trying to do is indent everything after the first line.

Right now it looks like:

Categories: Aperiri 
nostrum similique cu 
pro, maiorum delectus 
quo eu. Mentitum

I'm trying to get it to look like:

Categories: Aperiri 
  nostrum similique cu 
  pro, maiorum delectus 
  quo eu. Mentitum

I've tried adding to the css:

display: block;
margin: 2px;

But this screws up my text wrapping.

How can I have inline display but also indent after the first line in css?

Answer 1

You can use the text-indent property with a negative value and compensate it with a left margin.

For instance:

.negative-indent {
    margin-left: 40px;
    text-indent: -40px;
}

Reference for text-indent property: MDN

Answer 2

Use :first-line and text-indent tag. Put your whole text in one block (div or paragraph). Indent all lines and then set the first line to text-indent = 0

Example:

p { text-indent: -10px }
p:first-line { text-indent: 0 }

Answer 3

How about this:

.hClass p{
    padding-left: 20px;
}


.iClass{
    font-style: oblinque;
    color: rgb(136, 136, 136);
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
    margin-left: -20px;
}

See: http://jsfiddle.net/gVJK8/5/

Answer 4

I had the same problem. The answers published here until now gave me a bad result (letters were overlapping each other) when complex layout (eg tables) was present in the paragraph being undented.

After much trying I found that the following didn't mess with these.

text-indent: 0.5em hanging;

Only tried it in Chrome.

Answer 5

我发现最好使用这样的简单解决方案：

p:nth-child(n+2){text-indent: 3px;}