What is the best way to indent text in a DIV when it wraps?

Question

Hi all,

So I have a DIV that contains some dynamic text. Let's say I know the text and font-size but I don't know the size of the DIV. I'd like the display of the text in the DIV to be intelligent enough to show indentation when text wraps.

Say my original text looked something like this:

Lorem ipsum dolor sit amet, 
consectetur adipisicing 
elit, sed do eiusmod 
tempor incididunt

Instead, I want it to look like this:

Lorem ipsum dolor sit amet, 
   consectetur adipisicing 
   elit, sed do eiusmod 
   tempor incididunt

What's the best way to do this if I don't know the size of the DIV a priori? And what's the best way to do it if I do know the size?

Thanks!

Answer 1

If I understand what you're asking for, this works for me:

div {
    padding-left: 2em;
    text-indent: -2em;
}

Answer 2

Have you tried 'margin-left'?

<div>
Lorem ipsum dolor sit amet,
<div margin-left="5px"> consectetur adipisicing 
   elit, sed do eiusmod 
   tempor incididunt
</div>
</div>

Answer 3

This should work equally well for both variable and fixed size DIVs.

<div style="width: 150px; text-indent: -2em; padding-left: 2em;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt.
</div>

Answer 4

Not sure of the cross-browser support, but you could use the first-line pseudo-element:

p {padding:10px;}
p:first-line {padding-left:0px;}

<p>Hello World, I'm Jonathan Sampson</p>

Would be diplayed as

Hello World I'm
    Jonathan
    Sampson

Other than that, you could give the element left-padding, and then a negative text-indent.

Answer 5

W3C says you just have to use text-indent property.

source

.indentedtext
{
    text-align:start;
    text-indent:5em;
}