uni-app 文本显示两行超出部分显示...
<template> <view> <view>这是登录界面 <button @click="RedirdectToMain">跳转到首页</button> </view> </view> <view> <uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select" @progress="progress" @success="success" @fail="fail" @delete="deleted" /> </view> <view> <uni-data-select @change="change_value" :clear="true" :model-value="selectvalue2" :localdata="select_value2"></uni-data-select> <AddItem :select_range="select_value"> </AddItem> </view> <view class="text_item" style="width: 100px;height: 80px;border: 1px solid red;"> <text>这是文本胜多负少施工方打扫房间分iiiiiiiiiiiiiiiiiii手大师代发手打</text> </view> <view id="item-answer" class="item-answer visible-text"> <text>{{ content }}</text> </view> </template> <script> import { SlowBuffer } from 'buffer' export default { data() { return { content:"这是文本胜多负少施工方打扫房间分这是文本胜多负少施工方打扫房间分dsifsdfsdgfgfdfsfs", imageValue:[], selectvalue2: "", select_value2:[ { value:"1", text:"1" }, { value:"2", text:"2" } ], selectvalue: "", select_value:[ { value:"1", text:"1" }, { value:"2", text:"2" } ] } }, methods: { change_value(value){ this.selectvalue2 = value if(value) { this.select_value = [{ value:"3", text:"3" }, { value:"4", text:"4" }] }else{ console.log("选择的是空") //this.selectvalue = "" this.select_value = [ // { // value:"5", // text:"5" // }, // { // value:"6", // text:"6" // } ] } }, RedirdectToMain(){ console.log("跳转了") uni.switchTab({ url: "/pages/index/index", }) }, // 获取上传状态 select(e){ console.log('选择文件:',e) console.log(this.imageValue) this.imageValue.splice(0, 1) this.deleted(e) // console.log(tempFile) // this.tempFile.tempFilePath = "" }, // 获取上传进度 progress(e){ console.log('上传进度:',e) }, // 上传成功 success(e){ console.log('上传成功') }, // 上传失败 fail(e){ console.log('上传失败:',e) }, deleted(e){ console.log('删除图片:',e) } } } </script> <style> .text_item{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; /* -webkit-line-clamp: 2; //可/设置显示的行数 */ line-clamp: 2; -webkit-box-orient: vertical; } .item-answer { width: 300px; height: 80px; border: 1px solid red; font-size: 18px; font-weight: 400; color: #7b7b7b; line-height: 44px; margin: 12px 0 8px; } .visible-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } </style>
参考地址:https://www.jianshu.com/p/99a8405448b9