我有一个flex-box标签云,它是从外部调整大小的。 我希望其中的标签在需要时可折叠为零(边缘情况)。 现在,它们的填充距离只能达到其两倍。

图片

基本上,我需要一种方法来使flex-shrink赢得“ padding

如果可能的话,我想在不使用overflow:hidden的情况下实现这一目标,因为这会干扰此机箱中的其他内容。

可运行的代码段:

 $('button').on('click', (e) => { $('.tags').css({ width: $(e.target).text() }); }); 
 .tags { display: flex; margin-bottom: 20px; background: red; overflow: visible; padding: 20px 5px; } .tag { position: relative; padding: 5px 10px; background: #ccc; border: 1px solid #aaa; border-radius: 20px; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 1; overflow: hidden; } .tag + .tag { margin-left: 3px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>Tags will not collapse beyond 2 x padding</h3> <div class="tags" style="width: 200px"> <div class="tag">Tag 1</div> <div class="tag">Tag 2</div> <div class="tag">Tag 3</div> </div> <br /> <div> <button>200px</button> <button>100px</button> <button>50px</button> <button>10px</button> </div> 

有人有主意吗?

===============>>#1 票数:2 已采纳

flex-shrink不能胜过填充,普通的块元素也不能胜过: fiddle demo

进行此工作的一种方法是为文本添加一个额外的包装器,并在其上设置填充/边框(而不是flex项目)。

 $('button').on('click', (e) => { $('.tags').css({ width: $(e.target).text() }); }); 
 .tags { display: flex; margin-bottom: 20px; background: red; overflow: visible; padding: 20px 5px; } .tag { flex-shrink: 1; overflow: hidden; } .tag div { padding: 5px 10px; background: #ccc; border: 1px solid #aaa; border-radius: 20px; white-space: nowrap; text-overflow: ellipsis; } .tag + .tag { margin-left: 3px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>Tags will not collapse beyond 2 x padding</h3> <div class="tags" style="width: 200px"> <div class="tag"><div>Tag 1</div></div> <div class="tag"><div>Tag 2</div></div> <div class="tag"><div>Tag 3</div></div> </div> <br /> <div> <button>200px</button> <button>100px</button> <button>50px</button> <button>10px</button> </div> 

  ask by panta82 translate from so

未解决问题?本站智能推荐: