微信小程序 怎么让超出字数的文本变成小点点 我只需要3行代码! - 程序员阿鑫-带你一起秃头!

微信小程序 怎么让超出字数的文本变成小点点 我只需要3行代码!

作者: 程序员阿鑫

好兄弟,我们一起掉头发!

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

我们经常会遇到用户们对自己的店铺随意发挥介绍,我第一开始还考虑了一下使用js判断字数然后改变value,后来一看是我想复杂了

也许我们永远不知道用户会怎么样使用我们的产品,但是我们可以从产品上解决问题

我们只需要用几行CSS样式即可解决这个问题

两种情况:

1、只需要显示一行,超过的省略号处理

text{
    overflow:hidden;    //超出一行文字自动隐藏
    text-overflow:ellipsis;    //文字隐藏后添加省略号
    white-space:nowrap;    //强制不换行
}

2、多行文本下(例如我的那个)

text{
   display: -webkit-box;
   word-break: break-all;
   text-overflow: ellipsis;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;    // 3行后隐藏
}  

 修复完成效果图:

以上是《微信小程序 怎么让超出字数的文本变成小点点 我只需要3行代码!》的全部内容,

感谢您对程序员阿鑫博客的支持!

 

分享到:
打赏
未经允许不得转载:

作者: 程序员阿鑫, 转载或复制请以 超链接形式 并注明出处 程序员阿鑫-带你一起秃头!
原文地址: 《微信小程序 怎么让超出字数的文本变成小点点 我只需要3行代码!》 发布于2021-3-27

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

微信小程序 怎么让超出字数的文本变成小点点 我只需要3行代码!

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏