发表于: 2019-12-31 22:10:48
0 1252
今天完成的事情:
修改BUG
明天计划的事情:
DOME演示
遇到的问题:
无
收获:
文本效果
https://www.runoob.com/css3/css3-text-effects.html
文字溢出
text-overflow:
clip:剪掉
ellipsis:省略号
使用text-overflow属性是让文字溢出的时候被剪掉还是省略号.
注意:
这个需要其他属性配合这使用
overflow:
属性这里是指定内容溢出一个元素框后会发生什么。
overflow:hidden
一般用内容会被剪贴到
-webkit-line-clamp:多行溢出.
-webkit-line-clamp:2
这个CSS代码是让文本换行在第二行后后面的文本就不显示出来了跟
overflow:hidden配合这使用.
word-wrap: break-word:这个是允许单词换行到下一行
-webkit-box-orient:vertical; 这个是多行溢出属性相当于用来配合
文字样式
font-weight:设置文字粗细
自适应
display: -webkit-box;
自适应,它会让文本内容自己适应宽高.
输入框限制
oninput="value=value.replace(/[^\d]/g,'')"
//只能输入纯数字
flex布局
display: flex;
<view wx:for="{{listNeed}}" wx:key="item">
<!-- <navigator url="./articleData/articleData?id={{item.id}}"> -->
<view>
<!-- 图片 -->
<view>
<image src="{{item.image}}"></image>
</view>
<!-- 内容 -->
<view>
<view>{{item.title}}</view>
<view>{{item.author}}</view>
<view>
<rich-text nodes="{{item.content}}"></rich-text>
</view>
</view>
<!-- 时间点赞容器 -->
<view>
<view>
<!-- 点赞收藏容器 -->
<view>
<!--点赞 -->
<image bindtap="likeName" data-index="{{index}}" src="{{wantImg[index].img}}"></image>
<text>{{item.number_of_likes}}</text>
<!-- 收藏 -->
<image bindtap="love" data-index="{{index}}" src="{{love[index].img}}"></image>
<text>{{item.number_of_collections}}</text>
</view>
<!-- 时间箭头容器 -->
<view>
<view>{{item.update_at}}</view>
<view></view>
</view>
</view>
</view>
</view>
</view>
评论