小程序-文字超出限制
2017-10-18 11:07
190 查看
特意为了这一个功能点来记笔记。
我查资料的时候搜到这个博客
http://blog.csdn.net/u010168409/article/details/54429678
原贴的答案是这样的
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
然后自己试验了一下 发现这样写就可以达到效果了
2
3
4
5
1
2
3
4
5
1
2
3
4
5
用条件渲染 即wx:if,wx:elif,wx:else系列
eg1. 图片
2
3
4
1
2
3
4
1
2
3
4
eg2. 文字 text、view标签是同样的效果
当文字超出一行时会自动换行 那如何让文字不自动换行并在末尾加上省略号呢?
我查资料的时候搜到这个博客 http://blog.csdn.net/u010168409/article/details/54429678
原贴的答案是这样的
text { display: -webkit-box; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; font-size: 32rpx; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp:2; }1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
然后自己试验了一下 发现这样写就可以达到效果了
text{ overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap; //强制不换行 }1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
知识点二 在图片未能正确加载时 显示默认图片
用条件渲染 即wx:if,wx:elif,wx:else系列eg1. 图片
<block wx:for="{{data}}"> <image wx:if="{{item.avatar == ''}}" class="avatar" src="/images/cinema.png"></image> <image wx:else="{{item.avatar}}" class="avatar" src="{{item.avatar}}" background-size="cover"></image> </block>1
2
3
4
1
2
3
4
1
2
3
4
eg2. 文字 text、view标签是同样的效果
<block wx:for="{{data}}"> <view wx:if="{{item.entity_name==null}}" class="label"></view> <view wx:else="{{item.entity_name}}" class="label">{{item.entity_name}}</view> </block>
相关文章推荐
- 微信小程序-文字超出限制如何在末尾加省略号
- 小程序-文字超出限制
- 微信小程序-文字超出限制如何在末尾加省略号
- UI基础知识点,限制UItable的宽度和文字超出距离格式
- 微信小程序开发之css实现文字限制加省略号
- 不知道小程序能做什么?图片转文字的扫描不再限制
- css限制显示字数,文字长度超出部分用省略号表示【转】
- TextField字数超出限制自动截取限制长度内的文字
- css限制显示字数,文字长度超出部分用省略号表示
- CSS限制文字只能显示一行,超出部分显示省略号
- 怎么用html 显示出一横的多出来的文字,怎么实现CSS限制字数,超出部份显示点点点.
- css限制显示字数,文字长度超出部分用省略号表示 只显示一行
- css限制显示字数,文字长度超出部分用省略号表示
- CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
- 二进制的原码、反码、补码和程序超出整型限制时的运算
- c/c++里的 堆区 栈区 静态区 文字常量区 程序代码区
- 微信小程序 --- textarea、input的文本框标签,遮罩层无法覆盖文字问题
- Chrome 文字最小限制方法失效问题。
- 限制程序多次运行方法II
- 同名程序同时运行限制