CSS 去除盒子滚动条、文本溢出显示省略号

【一】tylus开发去除滚动条

代码:

去除滚动条:

.scroll
    ::-webkit-scrollbar
        width 0
        height 0
        color transparent

【二】单行文本溢出显示省略号

       overflow:hidden  //设置元素的溢出内容将被隐藏。
       text-overflow:ellipsis  // 当文本溢出容器时,使用省略号来表示被截断的文本
       white-space:nowrap  // 防止文本换行,使文本在同一行上显示

【三】多行文本溢出显示省略号

// Webkit 引擎的浏览器中使用弹性盒子布局

   display: -webkit-box;  // 将元素显示为一个伸缩盒子容器
   -webkit-box-orient: vertical;  // 设置盒子的排列方向为垂直方向
   -webkit-line-clamp: 2;   // 控制文本最多显示两行
   overflow: hidden;
   text-overflow: ellipsis;  // 控制文本溢出时显示省略号


// 针对 Uni小程序

// 1.
  display: flex;
  flex-direction: column;
  overflow: hidden;    
  max-height: 2;   // 控制文本最多显示两行
  text-overflow: ellipsis;  // 控制文本溢出时显示省略号
// 2.
  overflow: hidden 
  text-overflow: ellipsis;  // 控制文本溢出时显示省略号
  display: -webkit-box  // 将元素显示为一个伸缩盒子容器
  -webkit-line-clamp: 2  // 控制文本最多显示两行
  line-clamp: 2  // 基于W3C标准的盒子布局模型,元素限制为最多两行文本
// 3.
  overflow: hidden
  text-overflow: ellipsis
  display: -webkit-box
  -webkit-line-clamp: 2 //行数需设置
  line-clamp: 2
  /* autoprefixer: ignore next */ 
  -webkit-box-orient: vertical       

猜你喜欢

转载自blog.csdn.net/m0_73461567/article/details/129825875