<span> rientro testo avvolto

Così sto simulando un layout di tabella con un div e una coppia si estende al suo interno. Mi piacerebbe che lo span sulla destra indentasse qualsiasi testo che avvolge. Ho provato alcune cose e non riesco a farlo funzionare. Qualsiasi aiuto sarebbe apprezzato.<span> rientro testo avvolto

jsFiddle: http://jsfiddle.net/2Wbuv/

HTML

<div class="display-element"> 
    <span class="display-label">Field 1</span> 
    <span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span> 
</div> 
<div class="display-element"> 
    <span class="display-label">Field 2</span> 
    <span class="display-field">This is another string of data.</span> 
</div>

CSS

.display-element  {} 

.display-label   {display: inline-block; 
         width: 100px; 
         padding-left: 5px;} 

.display-field   {display: inline;}

fonte

2011-10-03 Scott Beeson

Perché non usare semplicemente 'display: table-cell'? – sdleihssirhc

Umm, genio ... Non l'ho mai usato prima e ora non ho idea del perché. Per favore rispondi così posso darti dei punti. –

Oh, tranne che ora non riesco a renderlo al 100% ... ancora lavorando su di esso. –

Check this out: http://jsfiddle.net/2Wbuv/2/

.display-element { 
 
} 
 

 
.display-label { 
 
    display: inline-block; 
 
    width: 100px; 
 
    padding-left: 5px; 
 
} 
 

 
.display-field { 
 
    display: inline-block; 
 
    padding-left: 50px; 
 
    text-indent: -50px; 
 
    vertical-align: top; 
 
    width: 200px; /* for testing purposes only */ 
 
}

<div class="display-element"> 
 
    <span class="display-label">Field 1</span> 
 
    <span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span> 
 
</div> 
 
<div class="display-element"> 
 
    <span class="display-label">Field 2</span> 
 
    <span class="display-field">This is another string of data.</span> 
 
</div>

fonte

2011-10-03 18:20:17 simshaun

Il problema con questo (che li rende entrambi inline-block) è che mette la prima riga in basso sulla riga successiva.Rimuovi la larghezza della seconda span e vedrai cosa intendo (o semplicemente fai la tua finestra ha meno di 300 pixel di larghezza). –

Se non si fornisce a '.display-field' una larghezza fissa, che richiede anche il passaggio da inline a inline-block poiché si tratta di un elemento span, è necessario renderlo emulare una cella di tabella utilizzando il non-cross-browser 'display 'compatibile: table-cell'. In alternativa, e questo è il modo in cui vorrei andare, usa una tabella reale. – simshaun

Sembra che si desideri un rientro sporgente. CSS qualcosa come questo dovrebbe fare il trucco:

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

Ma dal momento che il vostro <span> è un elemento inline, la proprietà text-trattino, così come altre proprietà CSS appartenenti ad un blocco, non ha senso.

fonte

2011-10-03 18:28:25

CSS 3 draft specifies a hanging indent. Se supportato dal browser, il seguente dovrebbe funzionare:

.hanging-indent 
{ 
    text-indent: 3em hanging each-line; 
}

Purtroppo né hanging né each-line valori sono currently supported in modern browsers come specifica per CSS Text Module Level 3 è ancora un progetto.

La funzione è implementata con un prefisso specifico del browser per WebKit e Chromium. Per Firefox there is an open Bug you may vote on.

fonte

2015-04-21 05:55:43

<span> rientro testo avvolto

risposta

Problemi correlati