发表于: 2019-12-31 22:10:48

0 1249


今天完成的事情:

修改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>




返回列表 返回列表
评论

    分享到