文本过长时，自动省略多余的文本。支持展开/收起功能，可以设置省略位置、自定义省略符号等。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	X	√	√

基本使用

最简单的用法，超出指定行数时自动显示省略号。

<template>
	<u-ellipsis 
		content="这是一段很长的文本内容，用来演示省略号组件的基本功能。当文本超出指定行数时，会自动显示省略号。"
	/>
</template>

展开收起

设置 expand-text 和 collapse-text 属性，可以实现展开收起功能。

<template>
	<u-ellipsis 
		expand-text="展开"
		collapse-text="收起"
		content="这是一段很长的文本内容，用来演示省略号组件的展开收起功能。当文本超出指定行数时，会自动显示省略号，点击展开按钮可以查看完整内容。"
		:rows="2"
	/>
</template>

省略位置

通过 position 属性可以设置省略位置，支持 start（头部省略）、end（尾部省略，默认）、middle（中间省略）。

<template>
	<view>
		<!-- 头部省略 -->
		<u-ellipsis 
			content="这是一段很长的文本内容，用来演示省略号组件的头部省略功能。"
			position="start"
			expand-text="展开"
			collapse-text="收起"
		/>
		
		<!-- 中间省略 -->
		<u-ellipsis 
			content="这是一段很长的文本内容，用来演示省略号组件的中间省略功能。"
			position="middle"
			expand-text="展开"
			collapse-text="收起"
		/>
	</view>
</template>

自定义省略符号

通过 symbol 属性可以自定义省略符号。

<template>
	<u-ellipsis 
		content="这是一段很长的文本内容，用来演示省略号组件的自定义省略符号功能。"
		symbol="***"
		expand-text="查看更多"
		collapse-text="收起"
	/>
</template>

自定义样式

可以通过相关属性自定义文本颜色、字体大小、行高等样式。

<template>
	<u-ellipsis 
		content="这是一段很长的文本内容，用来演示省略号组件的自定义样式功能。"
		:rows="3"
		color="#666666"
		:font-size="16"
		:line-height="24"
		action-color="#ff6b6b"
		expand-text="展开"
		collapse-text="收起"
	/>
</template>

事件监听

组件支持展开/收起状态变化事件。

<template>
	<u-ellipsis 
		content="这是一段支持点击事件的文本内容。"
		expand-text="展开"
		collapse-text="收起"
		@change="onExpandChange"
	/>
</template>

<script>
export default {
	methods: {
		onExpandChange(event) {
			console.log('展开状态变化:', event.expanded)
			console.log('当前显示内容:', event.content)
		}
	}
}
</script>

API

Ellipsis Props

参数	说明	类型	默认值
content	文本内容	String	-
position	省略位置	Enum	end
rows	显示行数	String | Number	1
expand-text	展开文本	String	-
collapse-text	收起文本	String	-
symbol	省略符号	String	...
color	文本颜色	String	#303133
font-size	文本大小	String | Number	14
line-height	行高	String | Number	20
action-color	展开/收起按钮颜色	String	#3c9cff
custom-style	自定义样式	Object	-

Ellipsis Events

事件名	说明	回调参数
change	展开/收起状态改变时触发	event =