gpt4 book ai didi

html - 单行动态列数的CSS解决方案

转载 作者:行者123 更新时间:2023-11-28 13:06:16 24 4
gpt4 key购买 nike

我整天都在为这个而苦苦挣扎......

出于产品质量检查的原因,我尝试使用 CSS 为现有控件添加外观,我不想编辑生成选项卡的代码。

控件是一个tabs控件,动态生成HTML...

我希望所有选项卡都在一行中...这很好...但是当它到达容器的边缘时...我希望所有子选项卡都压扁并隐藏或省略任何溢出的文本.

我有什么 -

----------------------------------------
|tab1 |tab2 |tab |tab <- container edge with tab 4 hidden.

我想要什么-

|tab1    |tab2   |tab 3  |tab 4  |tab x |

或-

|ta...|ta...|ta...|ta...|ta...|ta...|ta...          you get the idea...?

html 跨度在一个 div 中……就像飞机上的蛇……

<div>
<span>tab1</span>
<span>tab2</span>
...
<span>tabx</span>
</div>

有希望吗?

谢谢

编辑:必须在 IE7 中工作:'(

最佳答案

看看this fiddle - 它应该可以解决您所要求的一切

HTML

<div>
<span>tab1</span>
<span>tab2</span>
<span>tabx</span>
</div>

CSS

 div {
display: table;
table-layout: fixed;
width: 100%;
max-width: 100%;
}
span {
border: 1px solid grey;
padding: 0 20;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: table-cell;
}

关于html - 单行动态列数的CSS解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20121892/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com