uni-app nvue 页面 text 无法断句换行

uni-app nvue 页面 text 无法断句换行

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.4
手机系统 Android
手机系统版本号 Android 10
手机厂商 小米
手机机型 红米K30U
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

<template>  
    <view>  
        <view style="word-break: break-all;width: 300rpx;">  
            <text style="word-break: break-all;width: 300rpx;">{{u1}}: {{t1}}</text>  
        </view>  
        <view></view>  
        <view style="word-break: break-all;width: 300rpx;">  
            <text style="word-break: break-all;width: 300rpx;">{{u1}}: {{t2}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                u1: "路人甲",  
                t1: "hhhhhhhhhhhhhhhhhhhh",  
                t2: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或"  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

预期结果：

断句换行

实际结果：

没有断句换行

bug描述：

在nvue 页面 同一个 text中有两个变量, 不能断句换行, 就是附件那个效果 , 代码也在附件


更多关于uni-app nvue 页面 text 无法断句换行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这种有人管吗？？

更多关于uni-app nvue 页面 text 无法断句换行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


绝对定位覆盖，但只适合单行且定位的text一定只有一行的情况，文本末尾无法追加text
循环text标签，性能太差，长列表下无法满足需求
webview，无法添加点击事件，加载慢，能看到空白
原生插件 https://ext.dcloud.net.cn/plugin?id=11367 ，原生方案，任意组合，可点击可收起

在 nvue 页面中，text 组件默认不会自动换行，需要显式设置 lines 属性或使用 flex 布局来控制文本换行。你的代码中使用了 word-break: break-all，但该属性在 nvue 中可能不被完全支持，尤其是在处理中英文混合内容时。

建议改用以下方法：

  1. 为 text 组件设置 lines 属性，例如 lines="2" 来限制行数并自动换行。
  2. 使用 flex 布局，将父容器设置为 flex-direction: row 并允许换行，但需注意 text 组件本身默认是行内元素，可能需要调整。
  3. 如果内容固定，可以尝试用 view 替代 text，并设置 width 和 word-wrap: break-word。

示例修改：

<view style="width: 300rpx;">
    <text style="lines: 2;">{{u1}}: {{t1}}</text>
</view>
回到顶部