Text indent after the first line in a paragraph

html css indentation text-indent
bobo picture bobo · May 14, 2010 · Viewed 51.5k times · Source

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

Answer

Mathew picture Mathew · May 14, 2010

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

Related questions

Indenting only the first line of text in a paragraph?

I have several paragraphs that I would like to indent, although only the first lines of these paragraphs. How would I target just the first lines using CSS or HTML?

Read More
Indent starting from the second line of a paragraph with CSS

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

Read More
How to indent multiple levels of select optgroup with CSS?

Just trying to indent optgroup blocks by nesting depth really, I've tried a general margin-left rule, nested elements then trying to apply the same rule, tried padding-left... is indenting like this possible? It seems elementary :P In the example below, …

Read More