UNI-APP，text、rich-text控件显示字符串，当字符串过长时，实现自动换行

1、添加样式

<rich-text class="rich-txt" :nodes="detail"></rich-text>

.rich-txt{
			word-break: break-all;
			white-space: pre-line;
		}

完整代码示例：

<template>
	<view>
		<!-- 导航栏 -->
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content" color="#666666" v-if="!inputShowed">{{$t('cloudData.查询结果')}}</block>
			<block slot="right">
				<view class="s-bar" v-if="inputShowed">
					<view class="l-pr">
						<view class="ll-pr">
							<uni-icons class="i-pr" type="search" color="#CCCCCC" size="18" />
							<input confirm-type="search" class="s-bar-ipt" placeholder-class="s-bar-ipt-h" :placeholder="$t('common.请输入适配器编码/设备名称')" :value="keywords" :focus="inputShowed" @confirm="inputConfirm" @input="inputChange" />
						</view>
						<uni-icons class="i-pr" type="clear" color="#CCCCCC" size="16" v-if="keywords" @tap="clearInput" />
					</view>
					<view class="r-pr" @tap="hideInput">{{$t('common.取消')}}</view>
				</view>
				<view class="icon-pr" v-else>
					<uni-icons class="ic-pr" type="search" color="#666666" size="20" @tap="showInput" />
				</view>
			</block>
		</cu-custom>
		<!--列表-->
		<mescroll-body class="scrolly" ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback">
			<block v-for="(item, index) in dataList" :key="index">
				<tui-collapse :index="index" :current="item.current" :disabled="item.disabled" @click="collapseChange">
					<template v-slot:title>
						<tui-list-cell class="tlt-pr" :hover="!item.disabled">
							<text class="tlt-txt" :class="item.symbol?'bg-yellow':''">{{item.title}}</text>
						</tui-list-cell>
					</template>
					<template v-slot:content>
						<view class="cnt-pr" v-if="item.symbol"><rich-text class="rich-txt" :nodes="item.contentSel"></rich-text></view>
						<view class="cnt-pr" v-else><text class="rich-txt">{{item.content}}</text></view>
					</template>
				</tui-collapse>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
	import nText from "@/components/n-text/n-text.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			nText
		},
		data() {
			return {
				params: null,
				keywords: '',
				mescroll: null , //mescroll实例对象
				inputShowed: false,
				upOption: {
					use: false, //关闭上拉加载
				},
				//所有数据集
				dataList: [],
			}
		},
		onLoad(option) {
			console.log(option.param)
			this.params = option.param;
		},
		methods: {
			//搜索框功能函数
			showInput() {
				this.inputShowed = true;
			},
			hideInput() {
				this.inputShowed = false;
				uni.hideKeyboard(); //强行隐藏键盘
				//清除标记
				this.clearInput();
			},
			clearInput() {
				this.keywords = "";
				for (var i = 0; i < this.dataList.length; i++) {
					this.dataList[i].symbol = false;
					this.dataList[i].contentSel = '';
				}
			},
			inputChange(e) {
				this.keywords = e.detail.value;
				//关键词搜索
				if(this.keywords){
					var replaceString = '<span style="color:#f37b1d;font-size:16px;font-weight:bold;">' + this.keywords + "</span>";
					this.dataList.map((item) => {
						if(item.content.indexOf(this.keywords) > -1){
							item.symbol = true;
							item.contentSel = item.content.replaceAll(this.keywords, replaceString);
						}else{
							item.symbol = false;
							item.contentSel = '';
						}
					});
				}else{
					this.clearInput();
				}
			},
			inputConfirm(e) {
				this.keywords = e.detail.value;
			},
			//可展开列表
			collapseChange(e) {
				let index = e.index;	
				let item = this.dataList[index];
				item.current = item.current == index ? -1 : index;
			},
			//下拉刷新
			downCallback(){
				let params = {
					cmuid: uni.getStorageSync('cmuid'),
					adaptorCode: 'F06215068025'//this.params.adapterCode
				}
				this.api.getDatas(params).then(res => {
					console.log(res)
					if (res.data && res.data.msgCode && res.data.msgCode == "0") {
						//联网成功的回调,隐藏下拉刷新的状态
						this.mescroll.endSuccess();
						//处理数据
						var datas = res.data.data;
						//构建数据集
						this.dataList = [];
						for (var i = 0; i < datas.length; i++) {
							var item = {};
							item.title = (i+1) +".  "+ datas[i].timestamp;
							item.content = JSON.stringify(datas[i]);
							item.current = -1;
							item.disabled = false;
							item.symbol = false;
							item.contentSel = '';
							this.dataList.push(item);
						}
					} else {
						this.mescroll.endErr();
						this.api.showComToast(res.message);
					}
				}).catch(error => {
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			},
			
		}
	}
</script>

<style lang="scss">
.s-bar{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3rpx 3rpx 3rpx 10rpx;
	.l-pr{
		width: 85%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 30rpx;
		background-color: #f2f2f2;
		
		.ll-pr{
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.s-bar-ipt{
				flex: 1;
				font-size: 26rpx;
				color: black;
			}
			.s-bar-ipt-h{
				flex: 1;
				color: #CCCCCC;
				font-size: 26rpx;
			}
		}
		
		.i-pr{
			margin: 10rpx;
		}
	}
	.r-pr{
		width: 14%;
		font-size: 24rpx;
		text-align: center;
		padding-right: 5rpx;
	}
}

.icon-pr{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	
	.ic-pr{
		margin-right: 25rpx;
	}
}

.scrolly{
	.tlt-pr{
		margin-top: 10rpx;
		font-weight: bold;
		
		.tlt-txt{
			font-size: 32rpx;
		}
	}
	
	.cnt-pr{
		padding: 10rpx 15rpx;
		font-size: 24rpx;
		
		.rich-txt{
			word-break: break-all;
			white-space: pre-line;
		}
	}
}

</style>