小程序设置文字单行多行超出省略显示

 时间:2026-04-22 10:33:06

1、和日常工作一样啦,首先打开【开发工具】

小程序设置文字单行多行超出省略显示

2、打开发开工具后,新建一个页面并创建两段文字(这里是方便演示,大家忽略!)

小程序设置文字单行多行超出省略显示

3、打开CSS文件设置单行省略效果!

代码:

.demo1 {

display: block;

width: 100%;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

小程序设置文字单行多行超出省略显示

4、设置多行省略效果!

代码:

.demo2 {

width: 100%;

display: -webkit-box;

word-break: break-all;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

text-overflow: ellipsis;

}

小程序设置文字单行多行超出省略显示

5、最好我们来看看整体效果吧

小程序设置文字单行多行超出省略显示

  • CSS如何实现只显示div的下边框
  • mysql ERROR 1045 (28000)怎么解决
  • navicat怎么连接mysql
  • cmd切换到d盘
  • VS如何连接到数据库
  • 热门搜索
    男生怎么瘦脸 棉花糖怎么做 博世洗衣机怎么样 蛏子怎么吃 怎么盘头发 手机丢了怎么找回 微博怎么认证 金蟾怎么养 右胸口闷疼是怎么回事 卷心菜怎么做好吃