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

 时间: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如何连接到数据库
  • 热门搜索
    寡妇年是什么意思 如何招商引资 宝宝水土不服怎么办 pdf如何编辑 一条大河波浪宽是什么歌曲 python是什么意思 如何制作mv视频 如何申请经济适用房 开加一笔是什么字 左眼下眼睑跳动是什么原因