zoukankan      html  css  js  c++  java
  • css多行文本省略号


    适用于内核为webkit的浏览器:
      display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 3;   overflow: hidden;




    兼容大多数浏览器,但是最后一行无论文本是否溢出都会出现省略号,需配合js实现
      
    p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
    p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
    }
     
  • 相关阅读:
    ACM HDU 1176 免费馅饼(DP)
    PHP下载时中文文件名乱码的问题
    NYOJ 27
    NYOJ 148
    NYOJ 8
    NYOJ 138
    NYOJ 461
    POJ 1200
    STL排序算法
    NYOJ 523
  • 原文地址:https://www.cnblogs.com/myspecialzone/p/5885463.html
Copyright © 2011-2022 走看看