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

概述这就是我现在所拥有的： <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= 这就是我现在所拥有的：

<ul>    <li><a href="#"><i ></i>Home page</a></li>    <li><a href="#" ID="create-new-btn"><i ></i>Create new...</a></li>    <li><a href="#"><i ></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方式.

总结

以上是内存溢出为你收集整理的html – CSS溢出选项隐藏整个元素,而不是剪辑它全部内容，希望文章能够帮你解决html – CSS溢出选项隐藏整个元素,而不是剪辑它所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。