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

 时间: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如何连接到数据库
  • 热门搜索
    达美旅游网 兵马俑旅游攻略 越南旅游需要多少钱 日照旅游局 丝路旅游 著名旅游景点 山西大同旅游景点大全 五指山旅游攻略 铜川旅游景点大全 英国旅游购物攻略