Jaki jest najlepszy sposób wcięcia tekstu w DIV, gdy się zawija?

Question

Więc mam DIV, który zawiera jakiś tekst dynamiczny. Powiedzmy, że znam tekst i rozmiar czcionki, ale nie znam rozmiaru DIV. Chciałbym, aby wyświetlanie tekstu w DIV było wystarczająco inteligentne, aby pokazać wcięcie, gdy tekst się zawija.

Say mój oryginalny tekst wyglądał mniej więcej tak:

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

Zamiast tego chcę, żeby wyglądać tak:

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

Jaki jest najlepszy sposób, aby to zrobić, jeśli nie wiem wielkość DIV a priori? I jaki jest najlepszy sposób, aby to zrobić, jeśli znam rozmiar?

Dzięki!

Answer 1

Jeśli rozumiem o co pytasz o to działa na mnie:

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

Answer 2

ten powinien działać równie dobrze na obu DIV zmiennym i stałym rozmiarze.

<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

Nie pewny wsparcia cross-browser, ale można użyć first-line pseudo-element:

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

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

Lepiej być diplayed jak

Hello World Jestem
        Jonathan
        Sampson

Poza tym można nadać elementowi lewostronne, a następnie negatywne wcięcie tekstowe.

Answer 4

W3C mówi, że musisz użyć właściwości wcięcia tekstu.

source

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