Html 模拟灵活的宽度

我想实现页脚。这里的主要思想是，当窗口变窄时，页脚内的文本应该隐藏，但如果窗口变得足够宽，则页脚内的所有文本都应该可见。你能帮帮我吗

例如，若我有这样的标记，那个么即使窗口变得足够宽，文本也总是隐藏的。但若页脚内的文本也可见，那个就更好了

<style type="text/css">
#topbar { width: 100%; }
#topbar div { white-space: nowrap; overflow: hidden; width:70px; text-overflow: ellipsis;}
#topright div { text-align: right; }
</style>
<table id="topbar">
<tr>
  <td><div>Item1Item1</div></td>
  <td><div>Item2Item2Item2</div></td>
  <td><div>Item3Item3Item3Item3</div></td>
  <td><div>Item4Item4Item4Item4</div></td>
  <td><div>Item5Item5Item5Item5Item5Item5Item5</div></td>
  <td id="topright"><div>ItemRightItemRightItemRight</div></td>
</tr>
</table>

#顶栏{宽度：100%；}
#topbar div{空白：nowrap；溢出：隐藏；宽度：70px；文本溢出：省略号；}
#topright div{text align:right；}
项目1项目1
项目2项目2项目2
项目3项目3项目3项目3项目3
项目4项目4项目4项目4项目4
项目5项目5项目5项目5项目5项目5项目5项目5项目5项目5
ItemRightItemRightItemRightItemRight

---

提前感谢。

您可以使用CSS3媒体查询。宽度见本文档：

您基本上要做的是为不同的屏幕宽度（例如小于/大于800px）定义两个或多个不同的样式表（至少部分），执行如下操作：

.large-content{
    display: none;
}
@media screen and (min-width: 800px){
    .large-content{
    display: block;
    }
}

谷歌也应该引导你找到很多关于这个主题的有用资源