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

 时间:2026-02-13 08:19:51

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如何连接到数据库
  • 热门搜索
    肚子上的赘肉怎么减 韩语怎么学 白发怎么办 家里有蚂蚁怎么办 app id怎么注册 告罄怎么读 玩lolfps低怎么办 怎么下载电影 迈锐宝怎么样 昂克赛拉怎么样