正文

CSS 超出隐藏问题

IP云
IP云V管理员/6 阅读
08/06
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
.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下测试未生效
另有：

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

效果能够实现，

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

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

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