Overflow và chuyển văn bản thành tràn trong fieldsets

Question

Dưới đây là một ví dụ làm việc (trong các trình duyệt webkit, ít nhất) của tràn và text-overflow làm việc để cắt xén văn bản dài khi bạn thu nhỏ chiều rộng trình duyệt:

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

Nhưng, nếu Tôi quấn những div trong một fieldset cắt không còn xảy ra nữa. Bất kỳ ý tưởng về phong cách bổ sung tôi cần phải thêm?

dụ bị hỏng:

<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

Điều này là do weird behavior with fieldsets và the fix là thay đổi một số thuộc tính CSS nhất định mà trình duyệt đã đặt thành giá trị lạ. Ví dụ, ví dụ này cũng làm cho legend bị cắt độc đáo. Nó hoạt động trong Chrome cho tôi nhưng bạn có thể cần đọc qua the fix để xem cách làm cho nó hoạt động trên các trình duyệt khác.

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

Nó sẽ làm việc nếu bạn thêm một chiều rộng cố định để fieldset, ví dụ <fieldset style="width: 500px">. Điều đó có đủ không? Độ rộng của phần trăm dường như không hoạt động.