Cum se creează un stil de indentare compatibil cu browserul în CSS într-un interval de timp

Singurul lucru pe care l-am găsit a fost;

.hang {
    text-indent: -3em;
    margin-left: 3em;
} 

Singura modalitate de a face acest lucru este punerea de text într-un paragraf, ceea ce provoacă aceste linii oribile extraordinar de inestetice. Mai degrabă aș fi avut într-un tip de lucru .

Caut, de asemenea, o modalitate de a adăuga mai mult decât un singur nivel de agățare. Utilizarea paragrafelor pentru a stivui indențiile nu funcționează.

0
fr hi bn

3 răspunsuri

is an inline element. The term hanging indent is meaningless unless you're talking about a paragraph (which generally means a block element). You can, of course, change the margins on

or <div> or any other block element to get rid of extra vertical space between paragraphs.

You may want something like display: run-in, where the tag will become either block or inline depending on context... sadly, this is not yet universally supported by browsers.

0
adăugat
Abordarea simplificată ar fi utilizarea css-ului .hang pe un div, care este în esență același ca un interval, ci ca un element bloc în loc de text inline. Opțional, ați putea include display: block; în definiția .hang , dar apoi folosiți din nou span pentru acest lucru ar fi același cu utilizarea div ...
adăugat autor awe, sursa

Găsit un mod răcoros de a face doar asta, minus perioada urâtă.

p {
  padding-left: 20px; 
} 

p:first-letter {
  margin-left: -20px;
}

Frumos și simplu: D

Dacă liniile noi vă deranjează în blocuri p, puteți adăuga

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

Exemplu JSFiddle

0
adăugat
sau folosiți doar p {text-indent: -20px; padding-left: 20px}
adăugat autor ysth, sursa
Cred că vrei să spui "primul copil"
adăugat autor Andy Ford, sursa
Nu cred că ar fi "primul copil". Nu sunt sigur dacă ": prima literă" o va face fie. Nu a funcționat în testele mele. Puteți să oferiți un fișier jsfiddle?
adăugat autor Adam Youngers, sursa
Am creat următoarele [link] (jsfiddle.net/David_Barnett/UqHQv/). Singurul dezavantaj pe care l-am găsit acestei metode este că atunci când selectați textul, prima literă este adesea imposibil de selectat.
adăugat autor David Barnett, sursa
jsfiddle link
adăugat autor David Barnett, sursa
link spune că proprietățile marjelor pot fi utilizate cu : first-letter
adăugat autor gavsiu, sursa

Răspunsul celui mai bun este cu o singură excepție discutabilă; unitatea de măsură ar trebui să corespundă dimensiunii fontului.

p {
  text-indent: -2en; 
  padding-left: 2en;
}

"3" ar funcționa, de asemenea, în mod corespunzător; "em" nu este recomandat, deoarece este mai larg decât caracterul mediu într-un set alfabetic. "px" ar trebui să fie utilizat numai dacă intenționați să aliniați blocurile de blocuri de text cu dimensiuni diferite de fonturi.

0
adăugat
Testat în crom și nu-i place en . Googling en vs em se arată ca o lățime de caractere specifică liniei, nimic nu spune că o pot folosi pentru spațiere.
adăugat autor agweber, sursa