text-props.uvue

<template>
	<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">截断（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>
	</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>