zoukankan      html  css  js  c++  java
  • 文本内容超出父元素一行或多行省略号代替

    单行文本溢出省略号
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    多行文本溢出:

    第一种:

    .news_list li .news_text p{

        line-height: 25px;
        max-height: 50px;/*  行高与显示行数的乘积  */

    /*火狐不出现省略号,而是隐藏*/

    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2;/** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/

    }



    多行文本溢出省略号

    .news_list li .news_text p{

    /*要想兼容火狐,IE,除了一下兼容代码外,要设置行高和最大高*/

    position: relative;
        line-height: 25px;
        max-height: 50px;

    /*不兼容火狐,IE*/

    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2;/** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/

    }

    /*兼容火狐,ie9及以上*/
    .news_list li .news_text p::after {
        /*content: "...";*/
        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%);
    }


    /*兼容ie8*/
    .news_list li .news_text p:after {
        /*content: "...";*/
        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%);
    }

  • 相关阅读:
    阿里巴巴校招内推简历筛选方案
    SIFT中的尺度空间和传统图像金字塔
    boost的编译
    H264与RTP
    link2001错误无法解析外部符号metaObject
    windows 7下qtcreator里QWT文件的pro配置
    电脑键盘上你所不知道的秘密,学会了很牛气!
    http://blog.csdn.net/chenriwei2/article/details/38047119
    Seaborn中的kdeplot、rugplot、distplot与jointplot
    8-Pandas扩展之Pandas提升性能的方法(eval()、query())
  • 原文地址:https://www.cnblogs.com/zyl-930826/p/8649386.html
Copyright © 2011-2022 走看看