zoukankan      html  css  js  c++  java
  • 实现单行超出部分,省略号表示 兼容各浏览器

    这里介绍两种方法,都是css实现的,其他的js,jq代码,可以去网上搜索很多。

    第一种:margin负值定位法

    <div class="text_overflow" >
    <div class="text_con" >这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。</div>
    <div class="text_dotted" >…</div>
    .text_overflow{300px; height:25px; overflow:hidden;line-height:25px;border:1px solid #ccc;}
    .text_overflow .text_con{float:left;height:25px; margin-right:15px; overflow:hidden;}
    .text_overflow .text_dotted{ float:right;15px; height:26px;margin-top:-23px;margin-top:-30px;*margin-top:-23px;}

    预览效果为:

    解释:此段中text_dotted是单独放省略号的标签,当文字短时,省略号是隐藏在该文字所在行的上方,当 文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是省略号所在div层的高度的绝对值要比其margin的绝对值大,也就是 height:26px。要比margin-top:-23px;大。注意此句中,因为要兼容ie的各个版本,所以写了hack,导致ie8和ie9设置 了更大的margin-top。

    第二种:text-overflow:ellipsis+ ellipsis.xml

    代码如下:

    <div class="slh">多出的文省略号表示多出的文省略号表示多出多出</div>
    复制代码
    .slh{160px;height:50px;line-height:25px;border:4px solid #eee;
    white-space:nowrap;/*强制文本在一行内显示*/
    text-overflow:ellipsis; /*溢出省略号,支持ie、safari(webkit)*/
    -o-text-overflow:ellipsis; /*溢出省略号,支持opera*/
    overflow:hidden;/*溢出隐藏*/
    -moz-binding:url('ellipsis.xml#ellipsis');/*溢出省略号,支持firefox*/}
    复制代码

    预览效果为:

    解释:如上css备注所示,注意-moz-binding:url('ellipsis.xml#ellipsis');   这段中引用的xml文件,需要点击下载,放在文件中,借鉴学习与张鑫旭的博客http://www.zhangxinxu.com/。

  • 相关阅读:
    CF763C Timofey and Remoduling
    CF762E Radio Stations
    CF762D Maximum Path
    CF763B Timofey and Rectangles
    URAL1696 Salary for Robots
    uva10884 Persephone
    LA4273 Post Offices
    SCU3037 Painting the Balls
    poj3375 Network Connection
    Golang zip压缩文件读写操作
  • 原文地址:https://www.cnblogs.com/webqiand/p/4602564.html
Copyright © 2011-2022 走看看