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

texto centrado y justificado css

Question

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

Digamos que mi texto original se veía así:

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

En cambio, quiero que se vea así:

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

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

¡Gracias!

Answer 1

Esto debería funcionar igualmente bien para los DIV de tamaño variable y fijo.

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

No estoy seguro de la compatibilidad con varios navegadores, pero podría usar el pseudo-elemento de la primera línea :

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

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

Sería exhibido como

Hola mundo soy
Jonathan
Sampson

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

Answer 3

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

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

Answer 4

W3C dice que solo tiene que usar la propiedad de sangría de texto.

fuente

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