zoukankan      html  css  js  c++  java
  • 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="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





     
  • 相关阅读:
    CSS浏览器兼容----IE的定制CSS样式
    CSS浏览器兼容---判断IE版本的HTM语句
    单链表操作1
    数学建模1
    浏览器内核学习笔记二
    浏览器内核学习笔记一
    网页使用特殊字体
    SQL Server 2008 R2没有卸载干净
    RadioButtonFor绑定值
    SVN 服务启动报错 0x8007042a
  • 原文地址:https://www.cnblogs.com/mxh1099/p/4894995.html
Copyright © 2011-2022 走看看