如何首先收縮大型柔韌性兒童？

Question

我想為Web應用程序構建面包屑控件。 只要容器中的空間不足以顯示所有內容，則每個彈性框子級中的文本都應被截斷。 問題是矮個子的孩子會隨着大個子的孩子而縮小，並很快變得不可讀。

例如3個矮個子看起來很好：

但是一旦一個孩子有了更多的文字，一切都會減少：

有沒有一種方法可以配置flex box，使其將較大的子代縮小到與較小的子代相同的大小？

理想情況下，示例應如下所示：

 .container { display: flex; width: 600px; } .child { font-size: 30px; margin: 0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 

 <div class="container"> <div class="child"> Link A </div> <div class="child"> Link B </div> <div class="child"> Link C this is a really long link with lots of text </div> </div> 

Answer 1

我想使用flexbox ，選項是通過將flex: 1賦予child元素來使flex項拉伸相等的量（但這有一個缺點，即child項沒有自動寬度）-請參見下面的演示：

 .container { display: flex; width: 600px; } .child { font-size: 30px; margin: 0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: 1px solid blue; flex: 1; } 

 <div class="container"> <div class="child"> Link A </div> <div class="child"> Link B </div> <div class="child"> Link C this is a really long link with lots of text </div> </div> 

使用CSS Grid layout ，您可以輕松實現：

1. 使用display: grid容器上的display: grid 。

2. 添加grid-template-columns: repeat(3, auto)以使三列具有自動寬度

請參見下面的演示：

 .container { display: grid; /* defines a grid container */ grid-template-columns: repeat(3, auto); /* all three columns with auto width */ width: 600px; } .child { font-size: 30px; margin: 0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: 1px solid blue; } 

 <div class="container"> <div class="child"> Link A </div> <div class="child"> Link B </div> <div class="child"> Link C this is a really long link with lots of text </div> </div> 

Answer 2

您是否嘗試過為孩子們設置寬度？

 .container { display: flex; width: 600px; } .child { font-size: 30px; margin: 0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 200px; } 

 <div class="container"> <div class="child">Link A</div> <div class="child">Link B</div> <div class="child">Link C this is a really long link with lots of text</div> </div> 

Answer 3

您可以添加要顯示完整尺寸的較小孩子的最小寬度

 .container { display: flex; width: 600px; } .child { font-size: 30px; margin: 0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; min-width:86px; } 

 <div class="container"> <div class="child">Link A</div> <div class="child">Link B</div> <div class="child">Link C this is a really long link with lots of text</div> </div> 

Answer 4

我認為你正在尋找flex-shrink ， flex-grow和flex-basis ，為更多閱讀

 .container { display: flex; width: 300px;/*I changed this just for testing*/ } .child { flex: 1 1 33%;/*Add this line*/ font-size: 30px; margin: 0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 

 <div class="container"> <div class="child"> Link A </div> <div class="child"> Link B </div> <div class="child"> Link C this is a really long link with lots of text </div> </div>