przelewowy i Text-przelewowy ciągu fieldsets

Question

Oto przykład roboczych (w przeglądarkach WebKit, co najmniej) z przelewem i text-overflow pracy obciąć długi tekst, gdy kurczą szerokości przeglądarki:

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

Ale jeśli Pakuję te elementy div w zestaw pól, których obcięcie już się nie dzieje. Jakieś pomysły dotyczące dodatkowej stylizacji, które muszę dodać?

Złamane przykład:

<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

Jest to spowodowane weird behavior with fieldsets, a the fix jest zmiana niektórych właściwości CSS, że przeglądarki ustawione na dziwne wartości. Na przykład ten przykład sprawia, że ​​legend jest ładnie odcięty. Działa w Chrome dla mnie, ale być może będziesz musiał przeczytać the fix, aby zobaczyć, jak sprawić, by działał również w innych przeglądarkach.

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

To będzie działać, jeśli dodać do fieldset stałej szerokości, na przykład <fieldset style="width: 500px">. Czy to wystarczy? Wydaje się, że wartości procentowe nie działają.