3***@qq.com
3***@qq.com
  • 发布:2020-09-02 09:29
  • 更新:2022-08-16 13:33
  • 阅读:1017

【报Bug】APP端 cover-view组件 文字超出宽度不会自动换行

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: 荣耀v30

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view class="videoBox">
<video class="video" autoplay="true" show-fullscreen-btn="false" loop="true" :controls="controls"
src="http://1500001320.vod2.myqcloud.com/6c980a2evodcq1500001320/14e48f945285890806597531671/KXkeJBglCecA.mp4"

<!-- 按钮 -->
<cover-image class="fbvideo" src="/static/images/zyq/fbvideo.png"></cover-image>
<cover-view class="fbbtn videobtn">发视频</cover-view>

                <cover-image class="icon_love" src="/static/images/zyq/icon_love.png"></cover-image>   
                <cover-view class="lovebtn videobtn">6</cover-view>   

                <cover-image class="icon_prev" src="/static/images/zyq/icon_prev.png"></cover-image>   
                <cover-view class="prevbtn videobtn">上一个</cover-view>     

                <cover-image class="icon_next" src="/static/images/zyq/icon_next.png"></cover-image>      
                <cover-view class="nexbtn videobtn">下一个</cover-view>                      

            <cover-image class="bchui" src="/static/images/zyq/bchui.png"></cover-image>  
            <cover-view class="title">鸡冠花</cover-view>    
            <cover-view class="num">需求:200公斤   规格:统货</cover-view>  
            <!-- 去报价按钮 -->  
            <cover-image class="toprice" src="/static/images/zyq/icon_toprice.png"></cover-image>                 
            <!-- 个人信息 -->  
            <cover-image class="headerimg" src="/static/images/zyq/icon_toprice.png"></cover-image>  
            <cover-view class="heardername">王小花</cover-view>                  

            <!-- <cover-image class="geren" src="/static/images/zyq/geren.png"></cover-image> -->  

            <cover-image class="qiye" src="/static/images/zyq/qiye.png"></cover-image>  
            <cover-image class="baozhengjin" src="/static/images/zyq/baozhengjin.png"></cover-image>  

            <cover-image class="guanzhu" src="/static/images/zyq/icon_gz.png"></cover-image>  
            <!-- <cover-image class="ygz" src="/static/images/zyq/ygz.png"></cover-image> -->  
            <cover-view class="message">#来报价吧# 我们目前需要200公斤鸡冠花现货,有货的供应商们快来报价现货,有货的供应商们快来报价吧</cover-view>  

    </video>  

</view>  

</template>

<script>
export default {
data() {
return {
obj:{},
controls:false,
"pageNo": 1,
"pageSize": 10,
"totalRecord": 1,
}
},
onLoad() {

    },  
    methods: {  

    },  
}  

</script>

<style lang="scss" scoped>
.videoBox{
padding: 0;
margin: 0;
width: 750rpx;
height: 100vh;
display: flex;

    .video{  
        padding: 0;  
        flex: 1;    
        position: relative;  
        // height: 0;  
        // width: 750rpx;  
        height: 100vh;  
    }  
    .videobtn{  
        font-size: 24rpx;  
        color: #ffffff;  
        line-height: 50rpx;  
        height: 50rpx;  
        width: 70rpx;  
        text-align: center;  
    }  

    .fbvideo{  
        width: 62rpx;  
        height: 52rpx;  
        position: absolute;  
        right: 25rpx;  
        bottom: 550rpx;  
        // z-index: 999;  
    }  
    .fbbtn{  
        position: absolute;  
        right: 25rpx;  
        bottom: 500rpx;  

    }  
    .icon_love{  
        width: 65rpx;  
        height: 59rpx;  
        position: absolute;  
        right: 25rpx;  
        bottom: 400rpx;  
    }  
    .lovebtn{  
        position: absolute;  
        right: 25rpx;  
        bottom: 350rpx;  

    }  
    .icon_prev{  
        width: 60rpx;  
        height: 62rpx;  
        position: absolute;  
        right: 25rpx;  
        bottom: 250rpx;  
    }  
    .prevbtn{  
        position: absolute;  
        right: 25rpx;  
        bottom: 200rpx;  

    }  
    .bchui{  
        width: 580rpx;  
        height: 120rpx;  
        position: absolute;  
        left: 25rpx;  
        bottom: 270rpx;  
    }  
    .icon_next{  
        width: 60rpx;  
        height: 62rpx;  
        position: absolute;  
        right: 25rpx;  
        bottom: 100rpx;  
    }  
    .nexbtn{  
        position: absolute;  
        right: 25rpx;  
        bottom: 50rpx;  

    }  

    .title{  
        font-size: 28rpx;  
        line-height: 35rpx;  
        height: 35rpx;  
        color: #ffffff;  
        position: absolute;  
        left: 45rpx;  
        bottom: 330rpx;  
    }     
    .num{  
        font-size: 24rpx;  
        line-height: 35rpx;  
        height: 35rpx;  
        color: #FFFFFF;  
        position: absolute;  
        left: 45rpx;  
        bottom: 290rpx;  
        width: 330rpx;  
    }  
    .toprice{  
        width: 144rpx;  
        height: 61rpx;  
        position: absolute;  
        left: 440rpx;  
        bottom: 300rpx;  
    }  
        // z-index: 9999;  
    .headerimg{  
        width: 60rpx;  
        height: 60rpx;  
        border-radius: 60rpx;  
        position: absolute;  
        left: 25rpx;  
        bottom: 168rpx;  
    }     
    .heardername{  
        font-size: 28rpx;  
        color: #FFFFFF;  
        height: 35rpx;  
        width: 200rpx;  
        position: absolute;  
        left: 100rpx;  
        bottom: 203rpx;  
    }  
    .geren{  
        width: 44rpx;  
        height: 30rpx;  
        position: absolute;  
        left: 100rpx;  
        bottom: 166rpx;  
    }  
    .qiye{  
        width: 44rpx;  
        height: 32rpx;  
        position: absolute;  
        left: 100rpx;  
        bottom: 166rpx;  
    }  
    .baozhengjin{  
        width: 66rpx;  
        height: 30rpx;  
        position: absolute;  
        // left: 100rpx;  
        left: 160rpx;  
        bottom: 166rpx;  
    }  
    .guanzhu{  
        width: 122rpx;  
        height: 50rpx;  
        position: absolute;  
        // left: 100rpx;  
        left: 450rpx;  
        bottom: 170rpx;  
    }  
    .ygz{  
        width: 146rpx;  
        height: 50rpx;  
        position: absolute;  
        // left: 100rpx;  
        left: 450rpx;  
        bottom: 170rpx;  
    }  
    .message{  
        font-size: 30rpx;  
        color: #FFFFFF;  
        position: absolute;  
        left: 25rpx;  
        bottom: 60rpx;  
        width: 550rpx;  
        // height: 80rpx;  
        line-height: 35rpx;  
        // background-color: #007AFF;  
        word-break: break-all;  
        word-wrap:break-word;  
        white-space:pre-line;  
    }  

}  

</style>

操作步骤:

文字超出宽度无法换行

预期结果:

超出宽度自动换行

实际结果:

换不了行

bug描述:

2020-09-02 09:29 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com

你好,这个问题解决来了吗

滚滚红尘

滚滚红尘

我这更无语,字体大小都改不了。

  • 一顾倾人诚

    怀疑你用的是nvue页面 然后还不是在text标签中

    2022-08-16 15:03

123qing123

123qing123

请问解决了吗?我的也是

该问题目前已经被锁定, 无法添加新回复