javascript - 在前端中，多行超出省略最好的解决办法

Question

css多行省略也就只有chrome中可以实现，在其他浏览器貌似不行，js去解决的话，又出现一闪的效果。这种体验又不好，哪位大神有更好的解决办法？

黄舟 · Answer

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

p {
    position:relative;
    line-height:1.4em;
    /*三倍line-height去显示三行*/
    height:4.2em;
    /*多余的隐藏*/
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

PHP中文网 · Answer

text-overflow: ellipsis;
刚去caniuse上看了下，除了firefox最早期的几个版本不支持之外，其他的都支持的

ringa_lee · Answer

如果需要跨内核支持，允许固定高的可以借助多层嵌套浮动这么做：




    

    
        

        
           ...more
        
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    
    
        

            ...more

如需不定高，可借助line-clamp和float可以在webkit上实现自适应高的定制的多行省略，详细解释看黑科技：CSS定制多行省略

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程