zoukankan      html  css  js  c++  java
  • CSS隐藏多余文字的几个方法

    通常偏移掉字体的方式是

    (1)
    使用text-indent:-9999px;

    可是他有一个局限性 他只适用于块级元素block
    而我们往往有时候想偏移掉的a上的字体
    所以问题就来了
    text-indent:-9999px;虽然用起来比较惬意
    将a转化成block的话 往往 他身后的的元素就被他赶到下一行了
    如果正好这个a后面 是一个a按钮
    就要用float来浮动以使他身后再出现簇拥者
    这样是不是有些麻烦呢

    (2)
    line-height:0;
    font-size:0;
    overflow:hidden;

    能完美“隐藏”掉你background之上的字体
    经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

    (3)
    最方便的是加个span,然后display:none,而且这样不会出bug。
    遗憾的是,多了个标签,循环中使用的话,html又多了一堆字节,单个按钮推荐这样使用。

    而针对input value的隐藏这个方式就有些吃力了
    所以还是只能用block加text-indent来“偏移”模拟隐藏了
    display:block;
    font-size:0;
    line-height:0;
    text-indent:-9999px;
    经测试 ie6.0 、 7.0 、firefox 3.010 通过

    (4)

    CSS隱藏多余文字為...

    class="g_p_center g_t_right g_c_pdin g_h_20 c08" style="margin-bottom: 15px"> class="g_p_left"> > <div style="100px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看,hi.baidu.com/commy,试试看,hi.baidu.com/commy,</div> class="g_blog_list"> class="g_t_center g_c_pdin g_p_center c07 content"> class="ns_content">

    语法:
      text-overflow : clip | ellipsis

      参数:
      clip :  不显示省略标记(...),而是简单的裁切
      (clip这个参数是不常用的!)
      ellipsis :  当对象内文本溢出时显示省略标记(...)

      说明:
      设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
      请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

      示例:
      div { text-overflow : clip; }

      text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text-overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

  • 相关阅读:
    我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。
    VGA显示器如何连接HDMI接口主机
    h5ai搭建自己的文件分享程序
    阿里钉钉智能硬件产品上线企业0元购买
    chevereto搭建自己的图床站点
    简单配置webpack自动刷新浏览器
    简易nodejs爬虫抓取博客园指定用户的文章及浏览量
    使用es6的set和map实现数组去重复
    promise实例小球运动
    ImportError: Couldn't import Django.
  • 原文地址:https://www.cnblogs.com/hnyei/p/2211147.html
Copyright © 2011-2022 走看看