我有一個可能加載很長字符串的fieldseta 。legend我希望legend尊重寬度fieldset并只占用 50% 的空間。目前，如果legend太長，它仍然只占 50%，fieldset但會強制fieldset變寬，就像顯示整個字符串一樣。fieldset { box-sizing: border-box; display: inline-block; width: 100%;}legend { max-width: 50%;}/* Oversized SPAN content forces the FIELDSET to exceed the 100% width and breaks the layout. */legend span { display: inline-block; width: calc(100% - 100px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}<div> <fieldset> <legend>Product (<span>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>)</legend> </fieldset></div>
1 回答
不負相思意
TA貢獻1777條經驗 獲得超10個贊
該問題似乎與百分比值有關。您可以注意到，字段集比圖例大兩倍，因為您正在使用字段集，50%因此字段集根據圖例內容設置其寬度，然后根據該寬度解析百分比寬度。
解決方法之一是考慮長度而不是百分比，最接近百分比的是vw單位
legend {
max-width: 50vw;
}
/* Oversized SPAN content forces the FIELDSET to exceed the 100% width and breaks the layout. */
legend span {
display: inline-block;
width: calc(100% - 100px);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
<div>
<fieldset>
<legend>Product (<span>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>)</legend>
</fieldset>
</div>
另一個技巧是將字段集的寬度設置為長度，這樣它就不會考慮子內容。為此，我們可以使用一個較小的值并考慮min-width:100%保持塊行為
fieldset {
display:inline-block;
/* this will do the magic */
width:0;
min-width:100%;
/**/
box-sizing: border-box;
}
legend {
max-width: 50%;
}
/* Oversized SPAN content forces the FIELDSET to exceed the 100% width and breaks the layout. */
legend span {
display: inline-block;
width: calc(100% - 100px);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
<div>
<fieldset>
<legend>Product (<span>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>)</legend>
</fieldset>
</div>
- 1 回答
- 0 關注
- 136 瀏覽
添加回答
舉報
0/150
提交
取消