CSS 超出隐藏问题

.dropdown-navbar>li:last-child>a {
    1. border-bottom: 0 solid #DDD;
    2. border-top: 1px dotted transparent;
    3. color: #4f99c6;
    4. text-align: center;
    5. 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>//超出的隐藏 
http://www.jb51.net/css/177595.html在chrome下测试未生效
另有：
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>无标题文档</title>
10 
11 </head>
12 
13 <body>
14 
15 <span  style="width:200px; height:20px; border:0px; overflow:hidden; float:left;" id="more1">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</span><span onclick="document.getElementById('more1').style.height='auto'"> 显示更多</span>
16 
17 </body>
18 
19 </html>
View Code

效果能够实现，

overflow:hidden;float:left(或right);是必须的

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

--------------------------------------------------------------------------------------------------------------------------------------151102





　
posted @ 2015-10-20 15:36  半天的半天  阅读(2558)  评论(0)  编辑  收藏  举报