小程序怎么让文本只显示两行！超出后以...省略号显示！

最新推荐文章于 2024-08-03 10:09:39 发布

FOR=10000

最新推荐文章于 2024-08-03 10:09:39 发布

阅读量1.4w

点赞数 7

分类专栏：小程序 HTML

本文链接：https://blog.csdn.net/weixin_43099985/article/details/85861431

版权

小程序同时被 2 个专栏收录

6 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

本文介绍了一种在小程序中处理文字溢出的方法，通过设置CSS样式实现文字两行显示并以省略号结尾，避免了长文本超出容器范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于这个问题其实小程序和普通html是一样的，看如下代码

<view class="box">我的字数很多阿萨德撒萨达萨达萨达就安静的加多少家看得开卡打卡拉到了啦啦队啦啦队</view>

.box{
    width:100rpx;
    height:30rpx;//高度不能乱写，你要自己去看你的两行文字占多少高度
    font-size:15rpx;
    overflow:hidden;//一定要写
    text-overflow: ellipsis;//超出省略号
    display:-webkit-box;//一定要写
    -webkit-line-clamp: 2;//控制行数
    -webkit-box-orient: vertical;//一定要写
}

好啦！拜拜！