How to Indent All Text in a Paragraph Except the First Line

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

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

CSS - Indent all except first line

As long as your cells aren't going to be bordered, flexbox can work here for you.

td.dashed {
    display: -webkit-flex;
    display: flex;
}

Demo works with both a span or using content on a before psuedo element to contain the dashed. Does not work on anything older than IE10. Mozilla doesn't appear to like this, but it is supposed to support flexbox.

http://jsfiddle.net/Rjvc9/9/

Indenting only the first line of text in a paragraph?

Use the text-indent property.

p { 
   text-indent: 30px;
}

jsFiddle.

Indent first line of a paragraph, but only if it takes multiple lines

Here is hacky idea that requires an extra wrapper:

p {
 max-width: 350px;
 line-height:1.2em; /* height of one line */
}
.e {
  display:flex; /* a flex container to be able to use 100% in the height*/
}
/* a pseudo element to create the indentation*/
.e p:before {
  content:"";
  float:left;
  width:20px; 
  /* 0px if 100% (height of p) is less or equal to 1.2em (one line)
     1px if 100% is bigger than one line
  */
  height:clamp(0px,100% - 1.2em,1px)
}

<div class="e"><p>This is a pretty long paragraph which spans over a few lines. For that reason I wish its first line to be indented (as it should be).</p></div>

<div class="e"><p>These are short paragraphs.</p></div>

<div class="e"><p>I don't want them indented.</p></div>

<div class="e"><p>Unless they take multiple lines.</p></div>

How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

You could add padding to the li, and then use a negative text-indent value to displace the padding on the first line.

jsFiddle example

li {
    padding-left:30px;
    text-indent:-30px;
}

This is the only solution I can think of. I tried using :first-line, but that doesn't really work in this situation.

Text indent after the first line in a paragraph

You need text-indent. Normally text-indent pushes the first line inwards, but if you give it a minus figure and use a positive margin, you can achieve the effect you're after.

text-indent: -10px;
margin-left: 10px

How can I text-indent the start of a every paragraph apart from the first in css?

Another option which wouldn't require adding any additional markup or classes to your page:
http://codepen.io/panchroma/pen/jyaOJL

p{
  text-indent:20px;
}

body p:first-child{
  text-indent:0;
}

Good luck!

Dont Indent First Line of First Paragraph using CSS

You may want to use the css pseudo-class 'first-of-type'

p:first-of-type {
  text-indent: 0;
}

As the css selector implies the styling will only apply to the first p element.

How do I make the first line of text indent without it throwing everything else off?

If you want to use you markup you can wrap the indented text by your class.

HTML

    <div class="column">
        <p><span class="indent">EDUCATION</span>
            2014-18 Massey University Wellington, New Zealand. Bachelor of Design, Honours First Class. Visual Communication Design.
        </p>
        <p><span class="indent">WORK EXPERIENCE</span></p>
    </div>

CSS

.indent{
    text-indent: 70px;
    display:block; /* Added to force the span acting as a block to avoid <br> tag*/
    /*word-break: break-word; I don´t think you need this property. */
}

My Suggestion

<!-- The H3 heading it´s a suggestion, and you can always chose from the H1 -  H6 dependeng on your needs -->
<div class="column">
    <h3 class="indent">Education</h3> 
    <p>2014-18 Massey University Wellington, New Zealand. Bachelor of Design, Honours First Class. Visual Communication Design.</p>
    <h3 class="indent">Work Experience</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus elit tellus, dapibus cursus orci.</p>
</div>

.indent{
    text-indent: 70px;
    text-transform:uppercase;
    display:block; /* This one is optional in the suggested markup.*/
}

Indent starting from the second line of a paragraph with CSS

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.

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

<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>

<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>

---

Related Topics