uniapp nvue页面如何实现文字超出容器宽度自动换行？

【代码】uniapp nvue页面如何实现文字超出容器宽度自动换行？

Web-rx

351人浏览 · 2025-06-12 21:17:49

Web-rx · 2025-06-12 21:17:49 发布

用rich-text标签：

<rich-text :nodes="topItemText" class="flex-fill" style="line-height: 22px;"></rich-text>  
//注意line-height要写在rich-text标签style里

	function outputRichText(text) {
		return [{
			name: 'div',
			attrs: {
				style: `fontSize:16px;color:${theme.value === 'dark' ? '#d3d3d3' : '#212529'}`
			},
			children: [{
				type: 'text',
				text: text,
				attrs: {
					style: `fontSize:16px;color:${theme.value === 'dark' ? '#d3d3d3' : '#212529'}`
				}
			}]
		}]
	}


    const topItemText = outputRichText('你好')