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       

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不叫虎子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值