uni-app中文本过长-实现折叠与展开效果

效果：

代码：

<template>
	<view class="wrap">
		<view class="fload" :class="isFload ? 'hide' : 'show'">
　清晨，如果我比往常早点去公司，总会在一个特定的时间和路段，与一位中年环卫工相遇。
他结实黑瘦的身材，略带微笑的脸庞，在随身听播放的歌声里轻快的忙碌着。
晨曦洒在他健康、黝黑的脸上不但看不到一丝苦恼和自卑，还时不时看见他随着音乐低吟浅唱，一付悠然自得的样(2016-10-25)
		</view>
		
		<!-- 此处用了iconfont图标，自行处理或换成自己的图标-->
		<view class="right">
			<image v-if="isFload" src="../static/jiantouup.png" mode="" style="width: 32rpx;height: 32rpx;"  @click="fload"></image>
			<image v-if="!isFload" src="../static/down.png" mode=""  style="width: 32rpx;height: 32rpx;" @click="fload"></image>
		</view>
		
	</view>
	
</template>
 
<script>
	export default{
	      data(){
		   return{
			isFload: true 
		   }
		},
		methods:{
		    fload(){
                          //改变isFload的状态
			  this.isFload = !this.isFload;
		    }
		}
	}
</script>
 
<style scoped>
	.wrap{
		width:700upx;
		display: flex;
		font-size:32upx;
		justify-content: space-between;
		margin: 0 auto;
	}
	.fload{
		width:600upx;
		height: auto;
		display: -webkit-box;
		/*  CSS 属性 word-break 指定了怎样在单词内断行。 */
		word-break: break-all;
		-webkit-box-orient: vertical;
		/* 要显示多少行就改变line-clamp的数据,此处折叠起来显示2行*/
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;

		background-color:#F5F5F5;
	}
	.hide{
		display: -webkit-box;
	}
	.show{
		display: block;
	}
	.right{
		background-color: #4CD964;
		border-radius: 60rpx;
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
	}
	
 
</style>

word-break: break-all;

developer.mozilla.org/zh-CN/docs/…