text-props.uvue

<template>
	<scroll-view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">
				<text class="uni-title-text">text相关属性示例</text>
			</view>

			<view class="uni-title">
				<text class="uni-subtitle-text">根据宽度自动折行</text>
			</view>
			<view class="text-box">
				<text>{{multiLineText}}</text>
			</view>
			
			<view class="uni-title">
				<text class="uni-subtitle-text">\\n换行</text>
			</view>
			<view class="text-box">
				<text>\n换\n行\n</text>
			</view>

			<view class="uni-title">
				<text class="uni-subtitle-text">截断（clip）</text>
			</view>
			<view class="text-box" style="height: 200rpx;">
				<text class="uni-flex-item" style="text-overflow: clip;">{{multiLineText}}</text>
			</view>
			
			<view class="uni-title">
				<text class="uni-subtitle-text">截断（ellipsis）</text>
			</view>
			<view class="text-box" style="height: 200rpx;">
				<text class="uni-flex-item" style="text-overflow: ellipsis;">{{multiLineText}}</text>
			</view>

			<view class="uni-title">
				<text class="uni-subtitle-text">selectable</text>
			</view>
			<view class="text-box">
				<text :selectable="true">{{singleLineText}}</text>
			</view>

			<view class="uni-title">
				<text class="uni-subtitle-text">space</text>
				<text class="uni-subtitle-text">依次为nbsp ensp emsp效果</text>
			</view>
			<view class="text-box">
				<text space="nbsp">{{singleLineText}}</text>
				<text space="ensp">{{singleLineText}}</text>
				<text space="emsp">{{singleLineText}}</text>
			</view>

			<view class="uni-title">
				<text class="uni-subtitle-text">decode</text>
				<text class="uni-subtitle-text">依次为lt gt amp apos nbsp ensp emsp效果</text>
			</view>
			<view class="text-box">
				<text :decode="true">&lt; &gt; &amp; &apos;</text>
				<text :decode="true">uni-app&nbsp;x，终极跨平台方案</text>
				<text :decode="true">uni-app&ensp;x，终极跨平台方案</text>
				<text :decode="true">uni-app&emsp;x，终极跨平台方案</text>
			</view>
			
			<view class="uni-title">
				<text class="uni-subtitle-text">嵌套</text>
			</view>
			<view class="text-box">
				<text>一级节点黑色
					<text style="color: red;">二级节点红色
						<text>三级节点不继承二级的颜色</text>
					</text>
					<text style="font-size: 50px;">二级节点大字体</text>
				</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'text-props',
				multiLineText: 'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言；HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言',
				singleLineText: 'uni-app x，终极跨平台方案'
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.text-box {
		margin-bottom: 40rpx;
		padding: 40rpx 0;
		display: flex;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;
	}

	.text {
		font-size: 30rpx;
		color: #353535;
		line-height: 54rpx;
		text-align: center;
	}
</style>