1

我整天都在为此苦苦挣扎……

我正在尝试使用 CSS 为现有控件设置外观，出于产品 QA 的原因，我不想编辑生成选项卡的代码。

该控件是一个选项卡控件，它是动态生成的 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 中工作 :'(

4

2 回答 2

2

看看这个小提琴- 它应该可以解决你所要求的一切

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;
}
于 2013-11-21T13:17:05.507 回答
0

简单地添加这个 CSS ：

    div{width:100%}
   div > span {
                float:left;
                width:40px; //customise width as per your purpose, can be in %ge too!
                overflow:hidden;  //hides extra text
                white-space:nowrap  //avoid getting on new line
              }

修复宽度将限制区域，希望这会有所帮助！:)

于 2013-11-21T13:09:58.373 回答