Indent from the second line of a paragraph with CSS

Question

How can I step back from the second line of a paragraph?

I tried

p { text-indent: 200px; } p:first-line { text-indent: 0; } 

and

 p { margin-left: 200px; } p:first-line { margin-left: 0; } 

and

 (with position:relative;) p { left: 200px; } p:first-line { left: 0; } 

Answer 1

Is it literally just the second line that you want to indent, or is it from the second line (i.e. hanging indent )?

If this is the latter, then something according to this JSFiddle would be appropriate.

HTML

 <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> <br/><br/> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span> 

CSS

 div { padding-left: 1.5em; text-indent:-1.5em; } span { padding-left: 1.5em; text-indent:-1.5em; } 

This example shows how using the same CSS syntax in a DIV or SPAN creates different effects.

Answer 2

This worked for me:

 p { margin-left: -2em; text-indent: 2em } 

Answer 3

Make the left edge: 2 or so will push all the text, including the first line on the right 2em. Then add indent text (applicable to the first line) as -2 or so .. This returns the first line to start without a field. I tried it for list tags

 <style> ul li{ margin-left: 2em; text-indent: -2em; } </style> 

Answer 4

If you create a list style

you can "text-align: initial", and subsequent lines will be indented. I understand this may not suit your needs, but I checked if there is another solution before I change my markup.

I assume that the second line will work, but requires human thinking for the correct flow of content and, of course, hard line breaks (which do not bother me).

Answer 5

I had to indent two lines in order to have a larger first word in a paragraph. A cumbersome one-time solution is to place the text in the SVG element and place it in the same way as <img>. Using float and SVG height labels determines how many lines will be indented, for example.

 <p style="color: blue; font-size: large; padding-top: 4px;"> <svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 

• The height and width of the SVG determine the blocking area.
• Y = 36 - SVG source text depth and same as font size
• margin-top allows the best alignment of text and paragraph SVG
• The first two words are used here to remind you of the care of descenders

Yes, this is cumbersome, but it also does not depend on the width of the containing div.

The above answer was in my own request, so that the first word (s) of para was larger and placed over two lines. To just indent the first two lines of a pair, you can replace all SVG tags with the following single img pixel:

 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />