css文本超出隐藏显示省略号失效

香菊网 发表于: 2019-04-09 分类: css  front  css部分  HTML&CSS  H5部分  

单行显示省略号:

.box{
    width:300px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

多行显示省略号:

.box{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*3表示只显示3行*/
  -webkit-box-orient: vertical;
}

如果显示省略号失效 添加 autoprefixer

.box{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*3表示只显示3行*/
  /* autoprefixer: off */ 
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

原因:

   因为autoprefixer自动移除老式过时的代码,所以关闭后再开启。

标签: cssfrontcss部分HTML&CSSH5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮