您的位置：首页 > Web前端 > CSS

CSS 超出隐藏问题

2015-10-20 15:36 507 查看
.dropdown-navbar>li:last-child>a {border-bottom: 0 solid #DDD;border-top: 1px dotted transparent;color: #4f99c6;text-align: center;font-size: 13px;}
:first-child和:last-child
用来选择某个元素的第一个子元素。
//输入ul li:first-child
//输入ul li:last-child
刚刚有个这方面的视频，视频的系列名称叫做 《Buid New World》  里面的第八集是讲CSS3 选择器的，有机会看看吧

CSS中的background-imgage的url老是忘记，现在写出来特意记一记
　　background-image: url(/html/image/logo.gif);　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
---------------------------------------------------------------------------------------------------------------------------151029
今天遇到超出隐藏问题，网上资料显示:
　　<span style="color:#ff0000;">text-overflow:ellipsis;</span>//让超出的用...实现  ellipsis省略号
　　<span style="color:#ff0000;">white-space:nowrap;</span>//禁止换行
　　<span style="color:#ff0000;">overflow:hidden;</span>//超出的隐藏
/article/1296852.html在chrome下测试未生效
另有：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<span  style="width:200px; height:20px; border:0px; overflow:hidden; float:left;" id="more1">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</span><span onclick="document.getElementById('more1').style.height='auto'"> 显示更多</span>

</body>

</html>
View Code
效果能够实现，
overflow:hidden;float:left(或right);是必须的

但是同行内相邻<span></span>会受float:left影响引起错位，有待更进一步学习研究--------------------------------------------------------------------------------------------------------------------------------------151102

　

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航