¿Cuál es la mejor manera de sangrar texto en un DIV cuando se envuelve?

Question

Tengo un DIV que contiene texto dinámico. Digamos que sé el texto y el tamaño de la fuente, pero no sé el tamaño de la DIV. Me gustaría que la visualización del texto en el DIV sea lo suficientemente inteligente como para mostrar una sangría cuando el texto se ajusta.

decir que mi texto original se veía algo como esto:

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

En cambio, quiero que se vea como esto:

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

Cuál es la mejor manera de hacer esto si yo no sé el tamaño de la DIV a priori? ¿Y cuál es la mejor manera de hacerlo si sé el tamaño?

Gracias!

Answer 1

Si entiendo lo que estás pidiendo, esto funciona para mí:

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

Answer 2

Esto debería funcionar igual de bien para ambos DIVs de tamaño variable y fija.

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

No está seguro del soporte multi-navegador, pero se puede usar la first-line pseudo-element:

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

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

¿Hay que hacer diplayed como

Hello World estoy
        Jonathan
        Sampson

Aparte de eso, puede dar al elemento left-padding, y luego un texto-sangría negativo.

Answer 4

W3C dice que solo tiene que usar la propiedad del texto-sangrado.

source

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