uni-app uni-list-item组件中note内容为英文和数字时（比如内容是个sha1的值）不会自动换行

uni-app uni-list-item组件中note内容为英文和数字时（比如内容是个sha1的值）不会自动换行

项目信息 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 12.2.1
HBuilderX类型 正式
HBuilderX版本号 3.3.13
浏览器平台 Chrome
浏览器版本 98.0.4758.102
项目创建方式 HBuilderX

操作步骤：

直接在uni-list的官方例子上，修改note这个参数的值为b5f19131fd88f9810d5f431baa058c98b622d118cb210ece3314b17415466276

预期结果：

能正常换行的完整显示

实际结果：

文字被截断，显示不全

bug描述：

uni-list-item中的note内容为英文和数字时（比如内容是个sha1的值），不会自动换行


更多关于uni-app uni-list-item组件中note内容为英文和数字时（比如内容是个sha1的值）不会自动换行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

加个自动换行属性

更多关于uni-app uni-list-item组件中note内容为英文和数字时（比如内容是个sha1的值）不会自动换行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 uni-list-item 组件中，如果 note 内容包含英文和数字（如 SHA1 值），默认情况下可能不会自动换行。这是因为浏览器或小程序引擎默认会将连续的英文字符和数字视为一个整体，不会自动换行。

要解决这个问题，可以通过 CSS 样式来强制换行。你可以使用 word-break 或 white-space 属性来实现。

方法一：使用 word-break: break-all;

.uni-list-item__note {
    word-break: break-all;
}

方法二：使用 white-space: pre-wrap;

.uni-list-item__note {
    white-space: pre-wrap;
}

方法三：使用 overflow-wrap: break-word;

.uni-list-item__note {
    overflow-wrap: break-word;
}

示例代码

<template>
  <uni-list>
    <uni-list-item title="Title" note="ThisIsALongSHA1ValueThatNeedsToWrap1234567890abcdef"></uni-list-item>
  </uni-list>
</template>

<style>
.uni-list-item__note {
    word-break: break-all;
    /* 或者使用 white-space: pre-wrap; */
    /* 或者使用 overflow-wrap: break-word; */
}
</style>
回到顶部