Question

我想实现页脚。这里的主要思想是当窗口变窄时，页脚内部的文本应隐藏在窗口变窄的情况下，但如果窗口变得足够宽，则应该可以看到页脚内的所有文本。你能帮帮我吗？

例如，如果我有这样的标记，那么即使窗口变得足够宽，也总是隐藏文本。但如果页脚内的文字也可以显示，那应该会更好。

<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>

提前致谢。

Answer 1

您可以使用CSS3媒体查询。请参阅此文档以获取宽度：http://www.w3.org/TR/css3-mediaqueries/#width

你基本上做的是为不同的屏幕宽度（例如小于/宽于800px）定义两个或更多不同的样式表（至少部分），做类似的事情：

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

Google还应该为您提供有关此主题的大量有用资源。

模拟灵活的宽度

1 个答案: