uni-app nvue text组件文字显示不全

uni-app nvue text组件文字显示不全

信息类别 详情
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 macOS 12
HBuilderX 正式版
HBuilderX版本 3.3.2
手机系统 iOS
手机版本 iOS 12.2
手机厂商 苹果
手机机型 iPhone
页面类型 nvue
Vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
  <view>  
        <view>  
            <text class="text-content" style="white-space: pre-wrap;">{{flag?cutWord():`${content}`}}</text>  
        </view>  
    <view v-if="!hideBtn" class="trend-con-switch">  
      <text class="trend-con-switch" @click="flag = !flag">{{flag?'全文':'收起'}}</text>  
    </view>  
  </view>  
</template>

content通过父组件传递，cutWord是文字裁剪大概截取50个字左右

操作步骤：

必现，那几个长的文字，一直显示不完整

预期结果：

显示完整

实际结果：

无

bug描述：

长列表里面的长文字时，文字显示不全，iPhone 11真机没有问题，iPhone X和iPhone 6都出现

示例图片


更多关于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


我好像也遇到了一样的问题 最后一行显示不全 大佬有办法解决吗

在 nvue 中，text 组件默认使用 flex 布局，且默认 flex-wrap 为 nowrap，这可能导致长文本在特定容器宽度下被截断。从你的代码和问题描述来看，iPhone X 和 iPhone 6 屏幕较窄，更容易触发此问题。

解决方案：

  1. 为 text 组件显式设置 flex-wrap: wrap
    虽然你已设置 white-space: pre-wrap，但 nvue 中还需处理 flex 布局的换行：

    <text class="text-content" style="white-space: pre-wrap; flex-wrap: wrap;">{{flag?cutWord():`${content}`}}</text>

  2. 检查父容器宽度
    确保 text 的直接父容器（示例中的 view）宽度足够，或未设置 flex: 1 等可能压缩内容的样式。可尝试为父容器添加 width: 750rpx（满屏）测试。

  3. 使用 lines 属性控制行数（可选）
    若需限制行数并显示“全文/收起”，可使用 lines 属性：

    <text class="text-content" :lines="flag ? 0 : 2">{{content}}</text>

    注意：lines 在 nvue 中仅支持 text 组件，且设置为 0 表示不限行数。

  4. 避免在 text 内嵌套 view
    nvue 的 text 组件内只能嵌套 text，嵌套其他组件可能导致渲染异常。

建议调整后代码：

<template>
  <view>
    <text class="text-content" style="flex-wrap: wrap;">{{flag ? content : cutWord()}}</text>
    <view v-if="!hideBtn">
      <text @click="flag = !flag">{{flag ? '收起' : '全文'}}</text>
    </view>
  </view>
</template>
回到顶部