zoukankan      html  css  js  c++  java
  • webkit浏览器下多行显示,有省略号效果

    多行显示情况

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    

    除了上述,还有其他的解决方法,但要兼容其他浏览器,还是比较麻烦的

    可以通过设置高度来解决。

    另外,刚刚测试了一种方法:

    span{
    112px;
    height:57px;
    position: relative; 
    line-height: 20px;
    overflow: hidden;
    display:block;
    }
    span:after{ content: "..."; position: absolute; bottom: 0; right: 0; padding:0 17px 1px 0px; 27px; height:20px; color:#fff; background-color:#333;}

    通过设置伪类宽度和高度,可以遮挡省略号下面的字体。这种可以在IE浏览器下实现省略号

    单行显示

    一般设置下宽度

    112px;
    white-space:nowrap; 
    text-overflow:ellipsis;  
    overflow:hidden;
    

      

      

  • 相关阅读:
    POJ 2186 Popular Cows
    POJ 1364 King
    poj1811
    poj1404
    poj1781
    poj1386
    poj1442
    C#中调用IE打开某文档
    【观点】什么时候学习编程都不晚
    遍历DataTable内存数据的三种方法性能对比
  • 原文地址:https://www.cnblogs.com/WaTa/p/5728835.html
Copyright © 2011-2022 走看看