文字超出部分显示省略号...兼容IE

最新推荐文章于 2022-12-01 07:52:08 发布

前端一名小学生

最新推荐文章于 2022-12-01 07:52:08 发布

阅读量655

点赞数

分类专栏： web样式文章标签： css

本文链接：https://blog.youkuaiyun.com/a_SuperAdmin/article/details/115176770

版权

web样式专栏收录该内容

5 篇文章

订阅专栏

文字超出分为单行展示和多行展示，以下代码可以兼容多个浏览器以及小程序和APP
唯独低版本IE浏览器不兼容
单行设置：

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

多行设置

text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

IE兼容方式利用overflow:hidden 和伪元素加一个…来做一个假的

.chychxItem:nth-child(4)::after{
        float: right;
        content: '...';
        height: 20px;
        line-height: 20px;
        width: 3px;
        margin-top: -20px;
        color: #808080;
      }
      .chychxItem:nth-child(4)>span{
        -webkit-line-clamp: revert;
        overflow: hidden;
        text-overflow: clip;
        height: 57px;     
      }