找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1352

所属分类: 微信开发 微信小程序开发资源

本版块为微信小程序资源分享版块,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。

快捷导航www.henkuai.com):微信小程序开发者社区微信小程序开发问答微信小程序开发交流群

[最新文章] 微信小程序-文字超出限制如何在末尾加省略号

[复制链接]
查看: 1427|回复: 6
最佳答案
0 

2

主题

9

帖子

65

积分

新人求带

积分
65
 楼主| 发表于 2017-2-7 17:03:45 | 显示全部楼层 |阅读模式
微信小程序-文字超出限制如何在末尾加省略号

特意为了这一个功能点来记笔记。

当文字超出一行时会自动换行 那如何让文字不自动换行并在末尾加上省略号呢?

我查资料的时候搜到这个博客
http://blog.csdn.net/u010168409/article/details/54429678

原贴的答案是这样的
  1. text {
  2.     display: -webkit-box;
  3.     word-break: break-all;
  4.     text-overflow: ellipsis;
  5.     white-space: nowrap;
  6.     font-size: 32rpx;
  7.     overflow: hidden;
  8.     -webkit-box-orient: vertical;
  9.     -webkit-line-clamp:2;
  10. }
复制代码

然后自己试验了一下 发现这样写就可以达到效果了
  1. text{
  2.     overflow:hidden; //超出一行文字自动隐藏
  3.     text-overflow:ellipsis;//文字隐藏后添加省略号
  4.     white-space:nowrap;  //强制不换行
  5.     }
复制代码

知识点二 在图片未能正确加载时 显示默认图片

用条件渲染 即wx:if,wx:elif,wx:else系列

eg1. 图片
  1. <block wx:for="{{data}}">
  2. <image wx:if="{{item.avatar == ''}}" class="avatar" src="/images/cinema.png"></image>
  3.   <image wx:else="{{item.avatar}}" class="avatar" src="{{item.avatar}}" background-size="cover"></image>
  4. </block>
复制代码

eg2. 文字 text、view标签是同样的效果
  1. <block wx:for="{{data}}">
  2.   <view wx:if="{{item.entity_name==null}}" class="label"></view>
  3.   <view wx:else="{{item.entity_name}}" class="label">{{item.entity_name}}</view>
  4. </block>
复制代码

原文链接:http://blog.csdn.net/yanzyan/article/details/54573007
回复

使用道具 举报

最佳答案
0 

0

主题

10

帖子

224

积分

新人求带

积分
224
发表于 2017-2-17 07:05:30 | 显示全部楼层
非常感谢
回复

使用道具 举报

最佳答案
0 

0

主题

5

帖子

39

积分

新人求带

积分
39
发表于 2017-2-17 13:37:35 | 显示全部楼层
感谢楼主
回复

使用道具 举报

最佳答案
0 

0

主题

40

帖子

452

积分

略知一二

积分
452
发表于 2017-2-17 14:19:47 | 显示全部楼层
感谢楼主
回复

使用道具 举报

最佳答案
0 

0

主题

2

帖子

41

积分

新人求带

积分
41
发表于 2017-2-20 17:54:24 | 显示全部楼层
还不错哦
回复

使用道具 举报

最佳答案
0 

0

主题

7

帖子

125

积分

新人求带

积分
125
发表于 2017-2-22 11:21:56 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

2

帖子

81

积分

新人求带

积分
81
发表于 2017-2-23 21:31:03 | 显示全部楼层
真的很有用,谢谢啦!












专业代发帖子,发帖宣传,论坛发帖,网络推广,外链代发。
联系QQ:188662616   微信号:188662616

1. 论坛:发帖·顶贴·盖楼·维护·回复·评论·沉帖·负面压制·新闻评论·置顶加精等等~
2. 微博:加粉·直发·转发·评论·转评·话题·阅读量·投票·收藏·点赞·等等~
3. 微信:加粉·转发·点赞·阅读量·分享·投票·等等~
4. 点击:帖子点击率·视频点击率·博客点击率·网站IP·等等~
5. 视频:评论·点赞·等等~
6. sns :转发·评论·等等~
7. 问答:百度知道·360问答·搜搜问答·等等~
8. 投票:各种网络评选投票·等等~
9. 博客:博客发帖·评论·高等级博客发帖
10.qq群:各类群发
11.贴吧 :加关注·包月签到·包年签到·提高贴吧排名

承接各类网络任务!人手多,老手多,多年执行经验,全年无休假。
联系QQ:188662616  微信号:188662616

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com