オーバーフローとここでフィールドセット

Question

内のテキストオーバーフローは、オーバーフローとテキストオーバーフローのブラウザの幅を縮小したときに、長いテキストを切り捨てるように取り組んで（少なくとも、WebKitのブラウザで）作業例ですこれらのdivをフィールドセットにラップしても、トランケートはもう発生しません。私は追加する必要がある追加のスタイリングのアイデア？

壊れ例：あなたはたとえば<fieldset style="width: 500px">ため、fieldsetに一定の幅を追加する場合

<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

これはweird behavior with fieldsetsが原因であり、the fixは、ブラウザが奇妙な値に設定した特定のCSSプロパティを変更することです。たとえば、この例では、legendもうまく切断されます。これはChromeで動作しますが、他のブラウザでも動作させるには、the fixを読む必要があります。 1つのワークアラウンド私が見つけたが、私はまた、イベントのサイズを変更処理する必要があるため、理論的に、幅を設定せずにそれを行う方法があるはずだ

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

それは動作します。それで十分だろうか？パーセンテージの幅は機能していないようです。