来分析一下我这次所做项目的需求，首先重要的是卡片内部的布局需要卡片组件需要应用在两个场景下，每个场景的部分文本内容有区别，所以需要进行文本控制，而又要考虑到文本长度的问题，所以需要对文本内容进行一些处理，整理一下得出以下三个点
- 卡片布局
- 内容控制
- 文本处理
卡片布局
卡片布局采用flex布局将内容划分为两个部分，图片与文本，文本又划分为三部分，对应着各自的信息与内容，完整的dom结构如下所示。
<view class="info-list" > <view class="info-list-img"> <t-image src="" /> </view> <view class="info-list-text"> <view class="info-list-title">标题</view> <view class="info-list-tag active"> <view class="tag">标签</view> </view> <view class="info-list-intro">介绍</view> </view> </view> 复制代码
通过padding与margin来控制内容的间距，通过flex控制盒子的左右，上下调整，完成卡片的整体布局。
内容控制
由于有两个场景同样的文本区域但是不同的文本内容，而且文本内容是死的，所以一般需要使用属性来控制不同场景下的显示
properties: { tag: { type:Boolean, value:false } }, 复制代码
在组件js文件属性中定义布尔值类型属性，在组件内通过wx:if来控制显示
<view class="info-list-text"> <view class="info-list-title">标题</view> <view class="info-list-tag active" wx:if="{{tag}}"> <view class="tag">标签_1</view> </view> <view class="info-list-tag active" wx:else="{{tag}}"> <view class="tag">标签_2</view> </view> <view class="info-list-intro">介绍</view> </view> 复制代码
如上结构，由于含有两个类别的内容（而且数量也不一样），所以就可以使用定义好的属性来进行控制。
文本处理
文本处理分为两种情况，一种是多行文本，另一种是单行文本
单行文本
上面的代码块展现在标签内如何控制单行文本，因为一行是有限制的，如果标签内文本过长就需要对文本进行处理，搭配了white-space，text-overflow与overflow使用
white-space：控制文本溢出不换行的属性text-overflow：以ellipsis为值的时候，其文本溢出使用省略号显示overflow：控制文本溢出
三个属性搭配完成单行文本的溢出处理，其实这个场景下的文本处理就是需要考虑溢出，溢出后的填充，是否换行这三个问题，其中有一个重要的点就是需要去限制盒子的宽度，因为盒子不设置宽度会随着文本长度而增加的，下面来看看多行文本的处理。
多行文本
如上代码块，文本被控制在了三行，其他内容省略，其主要应用-webkit-box属性值即流体盒来实现限制多行文本
dispaly:-webkit-box;：设定流体盒模型-webkit-line-clamp：限制文本的行数-webkit-box-orient：规定内容以垂直形式排列
多行文本的处理在于设置流体盒对行数与排列进行限制，当然需要注意的是设定高度与字号，如果高度与字号还有设定的行数不匹配的话，仍会失效，会有文本溢出，但是省略不消失，这也是通过设定高度与设定overflow的原因。
特此声明：关于多行文本处理是我在网上查找的资料才cv实现的，虽然但是我还是去研究了一下午关于关于流体盒模型的问题，过几天整理一篇相关文章，感谢掘友们的支持。
