css面试题

最新推荐文章于 2024-10-19 18:17:00 发布

明致成

最新推荐文章于 2024-10-19 18:17:00 发布

阅读量125

点赞数

分类专栏： web前端开发面试必会文章标签： css

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/LiyangBai/article/details/102879219

版权

web前端开发面试必会专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、如何用css或js实现多行文本溢出省略效果，考虑兼容性？

答案：
   单行：
       overflow:hidden
       text-overflow:ellipsis
       white-space:nowrap

   多行：
       display:-webkit-box
       -webkit-box-orient:vertical
       -webkit-line-clamp:3
       overflow:hidden

   兼容：
       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-webkit-linear-gradient(left,transparent,#fff 55%)
           background:-moz-webkit-linear-gradient(left,transparent,#fff 55%)
           background:linear-gradient(left,transparent,#fff 55%)
       }