Overflow e Text-trabocco entro fieldsets

Question

Ecco un esempio di lavoro (nel browser WebKit, almeno) di troppo pieno e text-overflow di lavorare per troncare il testo lungo quando si compatta la larghezza del browser:

<div>short</div> 
<div style="overflow: hidden; text-overflow:ellipsis;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div> 
<div>short</div> 
<div>short</div> 
<div>short</div> 

Ma, se Io avvolgo quei div in un fieldset il troncato non succede più. Qualche idea su uno stile aggiuntivo che devo aggiungere?

rotto esempio:

<fieldset> 
    <div>short</div> 
    <div style="overflow: hidden; text-overflow: ellipsis;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div> 
    <div>short</div> 
    <div>short</div> 
    <div>short</div> 
</fieldset> 

Answer 1

Questo è dovuto a weird behavior with fieldsets e the fix è modificare alcune proprietà CSS che i browser impostano su valori strani. Ad esempio, questo esempio rende anche il legend tagliato in modo piacevole. Funziona in Chrome per me, ma potrebbe essere necessario leggere the fix per vedere come farlo funzionare anche in altri browser.

fieldset 
 
{ 
 
    min-width: 0; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 
legend 
 
{ 
 
    min-width: 0; 
 
    max-width: 100%; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<fieldset><legend>This is due to weird behavior with fieldsets, and the fix is to change certain CSS properties that browsers set to weird values.</legend><span>This is a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line of text that would normally overflow or cause the fieldset to widen and overflow itself.</span></fieldset>

Answer 2

Funzionerà se si aggiunge una larghezza fissa per fieldset, per esempio <fieldset style="width: 500px">. Sarebbe abbastanza? Le larghezze percentuali non sembrano funzionare.