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

Question

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 t

Answer 1

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

source

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

Answer 2

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 3

Use the CSS text-indent property:

.box {
  border: 1px solid #ffffd;
  background: #fff;
  max-width: 300px;
  padding: 15px 15px 15px 45px;
}  

.box p {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  text-align: justify;
  font-size: 12px;
  text-indent: -30px;
} 

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus natus minima ex possimus? Pariatur odit distinctio, similique, adipisci nesciunt molestias iusto ipsa repellendus recusandae unde, enim veniam voluptatem expedita.</p>
</div>

Answer 4

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

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

Answer 5

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>