我整天都在为这个而苦苦挣扎......
出于产品质量检查的原因,我尝试使用 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/