Indent starting from the second line of a paragraph with CSS

Question

How can I indent starting from the second line of a paragraph   I ve 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

User · Answer

Make left-margin  2em or so will push the whole text including first line to right 2em  Than add text-indent  applicable to first line  as -2em or so   This brings first line back to start without margin  I tried it for list tags   lt style gt      ul li        margin-left  2em        text-indent  -2em         lt  style gt

User · Answer

Is it literally just the second line you want to indent  or is it from the second line  ie  a hanging indent    If it is the latter  something along the lines of this JSFiddle would be appropriate    x000D   x000D      div   x000D          padding-left  1 5em  x000D          text-indent -1 5em  x000D        x000D       x000D      span   x000D          padding-left  1 5em  x000D          text-indent -1 5em  x000D        x000D   lt div gt 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  lt  div gt  x000D   x000D   lt span gt 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  lt  span gt  x000D   x000D   x000D    This example shows how using the same CSS syntax in a DIV or SPAN produce different effects

User · Answer

I needed to indent two rows to allow for a larger first word in a para  A cumbersome one-off solution is to place text in an SVG element and position this the same as an  lt img gt   Using float and the SVG s height tag defines how many rows will be indented e g    lt p style  color  blue  font-size  large  padding-top  4px   gt   lt svg height  44  width  260  style  float left margin-top -8px   gt  lt text x  0  y  36  fill  blue  font-family  Verdana  font-size  36  gt Lorum Ipsum lt  text gt  lt  svg gt   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  lt  p gt     SVG s height and width determine area blocked out   Y 36 is the depth to the SVG text baseline and same as font-size  margin-top s allow for best alignment of the SVG text and para text Used first two words here to remind care needed for descenders   Yes it is cumbersome but it is also independent of the width of the containing div   The above answer was to my own query to allow the first word s  of a para to be larger and positioned over two rows  To simply indent the first two lines of a para you could replace all the SVG tags with the following single pixel img    lt img src  data image gif base64 R0lGODlhAQABAIAAAP   wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw    style  float left width 260px height 44px     gt

User · Answer

If you style as list  you can  text-align  initial  and the subsequent lines will all indent   I realize this may not suit your needs  but I was checking to see if there was another solution before I change my markup    I guess putting the second line in  would also work  but requires human thinking for the content to flow properly  and  of course  hard line breaks  which don t bother me  per se

User · Answer

This worked for me    p   margin-left  -2em    text-indent  2em

User · Answer

There is a CSS3 working draft that will  hopefully soon  allow you to write just    p   text-indent  200px hanging      Keep an eye on  https   developer mozilla org en-US docs Web CSS text-indent

[html] Indent starting from the second line of a paragraph with CSS

Examples related to html

Examples related to css

Examples related to text

Examples related to pseudo-class

Examples related to indentation