débordement et texte-débordement dans les fieldsets

Question

Voici un exemple de travail (dans les navigateurs WebKit, au moins) de trop-plein et text-overflow travail tronquer long texte lorsque vous réduisez la largeur du navigateur:

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

Mais, si J'emballe ces divs dans un fieldset le tronqué ne se produit plus. Des idées sur le style supplémentaire que je dois ajouter?

exemple brisé:

<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

Ceci est dû à weird behavior with fieldsets, et the fix est de modifier certaines propriétés CSS que les navigateurs définissent à des valeurs bizarres. Par exemple, cet exemple rend également le legend bien coupé. Cela fonctionne dans Chrome pour moi mais vous devrez peut-être lire the fix pour voir comment le faire fonctionner dans d'autres navigateurs aussi.

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

Il ne fonctionnera que si vous ajoutez une largeur fixe à fieldset, par exemple <fieldset style="width: 500px">. Cela serait-il suffisant? Les largeurs en pourcentage ne semblent pas fonctionner.