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

 时间: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如何连接到数据库
  • 热门搜索
    同城旅游网 印度的首都是哪里 如何绑鱼钩 如何删除qq聊天记录 电脑关不了机怎么回事 电脑如何分盘 12306怎么改签 什么牌子的路由器好 自动挡车怎么开省油 如何学好高中数学