Hoe om 'n hele leser-versoenbaar hang streepje styl in CSS skep in 'n span

StackOverflow https://stackoverflow.com/questions/11809

  •  08-06-2019
  •  | 
  •  

Vra

Die enigste ding wat ek gevind het was; 

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

Die enigste manier om dit te laat werk is om teks in 'n paragraaf, wat dié verskriklik onooglike ekstra lyne veroorsaak. Ek sal baie eerder net hulle in 'n <span class="hang"></span> tipe ding.

Ek is ook op soek na 'n manier om verdere streepje as net 'n enkel-vlak van hang. Die gebruik van paragrawe om die indentions stapel nie werk nie.

Was dit nuttig?

Oplossing

<span> is 'n inline element. Die term hanginkeping is betekenisloos tensy jy praat oor 'n paragraaf (wat oor die algemeen beteken 'n blok element). Jy kan natuurlik verander die kantlyne op <p> of <div> of enige ander blok element om ontslae te raak van die ekstra vertikale ruimte tussen paragrawe.

Jy kan iets soos display: run-in, waar die tag óf blok of inline sal word, afhangende van konteks wil ... helaas, dit is nog nie universeel deur blaaier .

Ander wenke

Het jy 'n koel manier om dit te doen, minus die nare span. 

p {
  padding-left: 20px; 
} 

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

Nice en eenvoudig: D

As die newlines jy pla in p blokke, kan jy voeg 

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

JSFiddle Voorbeeld

antwoord ysth se beste met een debatteerbaar uitsondering; die eenheid van meet moet ooreenstem met die grootte van die skrif. 

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

"3" sou ook voldoende goed werk; "Em" word nie aanbeveel as dit is wyer as die gemiddelde karakter in 'n alfabetiese stel. "Px" moet slegs gebruik word as jy daarop gemik om hang van teks blokke in lyn te bring met verskillende skrifgroottes.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top