uni-app nvue中rich-text使用node方式line-height设置无效

uni-app nvue中rich-text使用node方式line-height设置无效

开发环境 版本号 项目创建方式
Mac HBuilderX

示例代码：

nodes: [{
name: ‘span’,
attrs: {
class: ‘div-class’,
style: ‘line-height: 160;color: red; text-align:center;font-size:12px’
},
children: [{
type: ‘text’,
text: ‘Hello uni-app!’
}]
}],


更多关于uni-app nvue中rich-text使用node方式line-height设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

顶一个

更多关于uni-app nvue中rich-text使用node方式line-height设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


顶一个

这个解决后，就可以解决nvue的text不能实现span display: inline; 的效果了

顶一个

顶一个

顶一个

顶一个

顶一个

nvue暂时不支持

回复 DCloud_Android_zl: 下个版本会上不

回复 DCloud_Android_zl: 不支持有没有可以其他解决方案呢

回复 7***@qq.com: 顶一个

可以通过设置容器节点的行高来实现

在 uni-app 的 nvue 页面中使用 rich-text 组件时，通过 node 方式设置 line-height 确实可能无效。这是因为 nvue 的渲染机制与普通 vue 页面不同，它基于原生渲染，对 CSS 属性的支持存在差异。

主要原因：

  1. nvue 中 rich-text 组件对 CSS 属性的支持有限，部分样式属性可能不被原生渲染引擎支持。
  2. line-height 在某些原生文本渲染场景下需要特定处理，直接通过 style 字符串设置可能无法生效。

解决方案：

  1. 改用 text 组件：如果内容主要是文本，考虑使用 text 组件，其样式控制更稳定。
    <text style="line-height: 160rpx; color: red; text-align: center; font-size: 12px;">Hello uni-app!</text>
  2. 使用 span 的 font-size 间接控制：通过调整 font-size 和布局属性模拟行高效果。
  3. 检查样式单位：确保使用正确的 CSS 单位（如 px 或 rpx），避免无单位数值。
    style: 'line-height: 160rpx; color: red; text-align: center; font-size: 12px;'
回到顶部