uni-app nvue 下 css属性 word-wrap 报错

uni-app nvue 下 css属性 word-wrap 报错

测试过的手机

  • iphone8
  • 360N5s

示例代码

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  
<style>  
    .text-area {  
        justify-content: center;  
        width:50rpx;  
    }  
    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
        word-wrap: break-word;  
    }  
</style>

操作步骤

  1. 新建.nvue文件
  2. text组件 加css
    word-wrap: break-word;
    在手机运行时报错

预期结果

正常运行。

实际结果

报错。

bug描述

text组件 加css

word-wrap: break-word;

在手机运行时报错。 IOS和安卓且真机测试时无效果。
小程序。h5端可以用 word-break:break-word代替。

附件

Image

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 11.2.1 (20D74)
HBuilderX类型 Alpha
HBuilderX版本号 3.1.3
手机系统 全部
手机厂商 华为
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app nvue 下 css属性 word-wrap 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

Android平台：nvue 暂不支持 word-wrap

更多关于uni-app nvue 下 css属性 word-wrap 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue中，text组件的样式支持有限，word-wrap属性确实不被支持。nvue的样式是基于weex的，与web标准有差异。建议改用以下方案：

  1. 对于nvue中的文本换行问题，可以使用lines属性控制行数：
<text class="title" lines="2">{{title}}</text>
  1. 或者使用flex布局自动换行：
.text-area {
  flex-wrap: wrap;
}
回到顶部