html – CSS溢出选项隐藏整个元素,而不是剪辑它

2023年2月27日 238次阅读

这就是我现在所拥有的：

<ul>
    <li><a href="#"><i class="fa fa-home"></i>Home page</a></li>
    <li><a href="#" id="create-new-btn"><i class="fa fa-plus"></i>Create new...</a></li>
    <li><a href="#"><i class="fa fa-user"></i>My profile</a></li>
</ul>

而对于容器：

#pando-header-c {
  position:absolute;
  left:100px;
  right:430px;
  height:50px;
  white-space: nowrap;
  overflow:hidden;
  display:block; 
}

但是,由于某种原因,它会部分地渲染元素,并且不会在溢出中将它们完全切掉;尽管事实上我已将它们全部设置为内联块和块(a,以及li).

这是它剪辑它的方式：
http://i.stack.imgur.com/dNTJ2.png

问题是如果整个元素不完全适合,如何将整个元素隐藏起来,将文本剪切掉.

最佳答案 根据定义,溢出是不适合的东西.所以隐藏意味着“隐藏溢出”,而不是元素.如果不适合我可以想到隐藏它的最好方法是使用媒体查询：

@media screen and (max-width: 600px) {
  #pando-header-c {
    display: none;
  }
}

你需要一些调整才能看到,但是如果内容大于容器,我就不会想到隐藏它的CSS方式.

点赞