zoukankan      html  css  js  c++  java
  • css--两行显示省略号兼容火狐浏览器

    css--两行显示省略号兼容火狐浏览器

    正常写法:

    .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .ellipse2{overflow:hidden; text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

      总结下来就是:固定的宽度,强制不换行,超出隐藏,显示省略号。四个属性

    但是在火狐下不兼容:

    兼容做法:

    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%);
    }
    1. 将height设置为line-height的整数倍,防止超出的文字露出。
    2. 给p::after添加渐变背景可避免文字只显示一半。
    3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
  • 相关阅读:
    中位数相关
    带权并查集
    组合数相关、多重集组合数
    LIS最长上升子序列
    提高你css技能的css开发技巧
    如何让搜索引擎抓取AJAX内容?
    Javascript异步编程的4种方法
    前端自动化构建工具gulp
    前端自动化构建工具
    git使用
  • 原文地址:https://www.cnblogs.com/intelwisd/p/7840407.html
Copyright © 2011-2022 走看看