Text indent after the first line in a paragraph

Question

- A Reuters reporter in Surkhrod district in Nangarhar province, where villagers said the raids took place, said Afghan police fired at the crowd after some of them started throwing stones at local government buildings.

In the above paragraph, I would like to use CSS to make all lines after the first line to automatically indent some space so that each line stays right after the - in the first line.

HTML

<p> - A Reuters reporter in Surkhrod district in Nangarhar province, where 
villagers said the raids took place, said Afghan police fired at the crowd 
after some of them started throwing stones at local government buildings.</p>

It's similar to a list item with list position set to outside, but I don't want to use a list.

What is the simplest way you can think of to achieve this effect? Less extra html markups will be better.

Many thanks to you all.

score 84 · Accepted Answer · edited Nov 26 '17 at 01:57

84

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

edited Nov 26 '17 at 01:57

diralik

6,391
3
28
52

answered May 14 '10 at 09:32

Mathew

8,203
6
37
59

10

Use of padding seems to be better than margin to not get outside of the block as KennyTM wrote in his answer. – Nicolas Nov 07 '12 at 16:54

score 46 · Answer 2 · answered May 14 '10 at 09:31

46

p {
  text-indent: -1em;
  padding-left: 1em;
}

answered May 14 '10 at 09:31

kennytm

510,854
105
1,084
1,005

This is not a magical bullet as it might seem but is essentially the same as ```text-indent: px; padding-left: -px;```, so it won't work for many font/font-size combinations. – certainlyakey Sep 11 '17 at 14:34

score 2 · Answer 3 · answered Jan 18 '17 at 11:27

2

Not usable right now but if you activate the Experimental Web platform Flag on chrome you can use text-indent:1em each-line; which should do exactly what you want.

text-indent on MDN

answered Jan 18 '17 at 11:27

sylvain

1,951
2
19
34

Worth upvoting for the future when this very convenient feature is (hopefully) supported by major browsers. – V. Rubinetti May 25 '17 at 19:14

code-sushi · Answer 4 · 2015-04-20T19:41:11.503

On inline elements maybe it works differently, I have noticed. I was needing an "outdent" (first line further left than rest of paragraph) and noticed the suggestions above did the opposite -- created a regular indent (where first line is further RIGHT than other lines). Here is what works for an inline element, for example, an "a" tag:

#myDiv ul li { margin-left:1em; }
#myDiv ul li a { color:#333; text-indent:0.5em; margin-left:-1em; line-height:1; }

I also set the containing block-level element to have a margin of 1em, so that where the inline "a" elements commence, with their negative margins, they actually position exactly where I things would have been originally before messing around to make an "outdent".

Hope this helps someone! I also noticed there's no size control on the text-indent itself on my inline element, either....

JSFiddle Example

score 0 · Answer 5 · answered May 04 '19 at 21:07

Building on @kennytm's answer; if you want to align monospaced text, use ch units instead of em units. For example:

<div class="query-select">SELECT Field1, Field2, Field3, Field4, Field5, Field6, Field7, Field8, Field9, Field10</div>

with ch-based padding/negative indents

.query-select {
  padding-left: 8ch;
  text-indent: -7ch;
}

Will render (based on page width) as:

  SELECT Field1, Field2, Field3, Field4, Field5, Field6, 
         Field7, Field8, Field9, Field10

Text indent after the first line in a paragraph

5 Answers5

Linked

Related