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

posted @ 2023-10-10 21:15  vba是最好的语言  阅读(510)  评论(0编辑  收藏  举报