美文网首页
css超出两行省略号,超出一行省略号

css超出两行省略号,超出一行省略号

作者: 前端召唤师 | 来源:发表于2019-04-26 12:06 被阅读0次

    超出一行省略:

    
    p{
    
    white-space:nowrap;
    
    overflow:hidden;
    
    text-overflow:ellipsis; 
    
    }
    
    

    超出2行省略

    
    p {
    
    overflow:hidden; 
    
    text-overflow:ellipsis; 
    
    display: -webkit-box;
    
    -webkit-box-align: start; //让内容居左
    
     /*! autoprefixer: off */
    
    -webkit-box-orient:vertical; 
    
    /* autoprefixer: on */ 
    -webkit-line-clamp:2; 
    
    }
    
    

    注:两行注释必须要!因为 webpack打包后-webkit-box-orient会被移除,autoprefixer会自动移除老式过时的代码,所以需要添加注释关闭autoprefixer。如果有清除注释的插件,将该插件设为false,否则不生效。

    但当css样式为外部引入时,这样写会报警告:Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
    需修改为:

    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    

    参考:https://www.cnblogs.com/yangguojin/p/10301981.html

    相关文章

      网友评论

          本文标题:css超出两行省略号,超出一行省略号

          本文链接:https://www.haomeiwen.com/subject/rosfnqtx.html