小程序若是页面中有一段说明文字，，要求默认收起，，只展示3行；；点击按钮可以审查完整内容。。。那么要怎样实现，，以下就为各人解答

先看看结构文件，，要害在与{{ellipsis?'ellipsis':'unellipsis'}}，，样式凭证js中的ellipsis改变。。。

1. <view class='bg-white marginTop10 vertical'>
2. <text class='pay-hint-tille'>挂号支付须知</text>
3. <text class="pay-hint-content {{ellipsis?'ellipsis':'unellipsis'}}" >1.
4. 支付乐成后，，将会推送排队号；；就诊当日可直接前往诊室期待叫号就诊，，无需再现场缴费、排队。。。\n2. 已完成支付挂号用度的用户，，如在就诊前一日作废预约订单，，乐成申请作废订单后，，正常情形下系统将会在7个事情日内自动退费至用户支付账号内。。。\n3. 订单在正常状态下（非系统故障、非医生暂时停诊）被爽约，，由于占用了医院号源，，此类订单不予以退费。。。</text>
5. <view class='bg-white-ellipsis' bindtap='ellipsis'>
6. <image class='img-ellipsis' src="/"{{ellipsis?'../images/ellipsis.png':'../images/unellipsis.png'}}"></image>
7. </view>
8. </view>

接下来看下css，，其他的css都是通例设置，，不需要看，， 我们看下pay-hint-content及后面的ellipsis与unellipsis：

1. .pay-hint-content{
2. margin-left: 5%;
3. margin-right: 5%;
4. margin-top: 10px;
5. font-size: 13px;
6. color: #888;
7. display: -webkit-box;
8. -webkit-box-orient:vertical;
9. text-overflow: ellipsis;
10. overflow:hidden; // 通过以上四行实现缩短功效
11. }
12. .ellipsis{
13. -webkit-line-clamp:3; // 最多显示3行
14. opacity: 0.75 // 透明度75%
15. }
16. .unellipsis{
17. -webkit-line-clamp:0; // 所有显示
18. opacity: 1 // 不透明
19. }

这里需要注重的有overflow：hidden

我们再看看js：

1. Page({
2. data: {
3. ellipsis: true, // 文字是否收起，，默认收起
4. },
5. /**
6. * 收起/睁开按钮点击事务
7. */
8. ellipsis: function () {
9. var value = !this.data.ellipsis;
10. this.setData({
11. ellipsis: value
12. })
13. },

小程序工具提供多类型商城/门店小程序制作，，可视化编辑 1秒天生5步上线。。。通过拖拽、拼接？？榻峁剐〕绦蛏坛且趁，，所看即所得，，只需要美工就能做出细腻商城。。。更多小程序市肆请审查：小程序市肆