APIs

参数	说明	类型	默认值	必传
maxWidth	文本最大宽度	number | string	‘100%’	false
line	最大行数	number	undefined	false
trigger	展开的触发方式	‘click’	undefined	false
tooltip	是否启用文本提示框	boolean	true	false
tooltipMaxWidth	提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致	number	undefined	false
tooltipFontSize	提示文本字体大小，单位px，优先级高于 overlayStyle	number	14	false
tooltipColor	提示文本字体颜色，优先级高于 overlayStyle	string	‘#FFF’	false
tooltipBackgroundColor	提示框背景颜色，优先级高于 overlayStyle	string	‘rgba(0, 0, 0, .85)’	false
tooltipOverlayStyle	提示框内容区域样式	CSSProperties	{padding: ‘8px 12px’, textAlign: ‘justify’}	false

Events

事件名称	说明	参数
expand	点击文本展开收起时的回调	(expand: boolean) => void

效果如下图：在线预览

创建文本省略组件Ellipsis.vue

其中引入使用了 Vue3文本提示（Tooltip）

<script setup lang="ts">
import Tooltip from '../tooltip'
import { ref, computed, watchEffect, nextTick } from 'vue'
import type { CSSProperties } from 'vue'
interface Props {maxWidth?: number|string // 文本最大宽度line?: number // 最大行数trigger?: 'click' // 展开的触发方式tooltip?: boolean // 是否启用文本提示框// 以下均为 tooltip 组件属性tooltipMaxWidth?: number // 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致tooltipFontSize?: number // 提示文本字体大小，单位px，优先级高于 overlayStyletooltipColor?: string // 提示文本字体颜色，优先级高于 overlayStyletooltipBackgroundColor?: string // 提示框背景颜色，优先级高于 overlayStyletooltipOverlayStyle?: CSSProperties // 提示框内容区域样式
}
const props = withDefaults(defineProps<Props>(), {maxWidth: '100%',line: undefined,trigger: undefined,tooltip: true,tooltipMaxWidth: undefined,tooltipFontSize: 14,tooltipColor: '#FFF',tooltipBackgroundColor: 'rgba(0, 0, 0, .85)',tooltipOverlayStyle: () => ({padding: '8px 12px', textAlign: 'justify'})
})
const textMaxWidth = computed(() => {if (typeof props.maxWidth === 'number') {return props.maxWidth + 'px'}return props.maxWidth
})
const showTooltip = ref()
const ellipsis = ref()
const defaultTooltipMaxWidth = ref()
watchEffect(() => {showTooltip.value = props.tooltip
})
watchEffect(() => {if (props.tooltip) {if (props.tooltipMaxWidth) {defaultTooltipMaxWidth.value = props.tooltipMaxWidth} else {defaultTooltipMaxWidth.value = ellipsis.value.offsetWidth + 24}}
}, {flush: 'post'})
const emit = defineEmits(['expand'])
function onExpand () {if (ellipsis.value.style['-webkit-line-clamp']) {if (props.tooltip) {showTooltip.value = falsenextTick(() => {ellipsis.value.style['-webkit-line-clamp'] = ''})} else {ellipsis.value.style['-webkit-line-clamp'] = ''}emit('expand', true)} else {if (props.tooltip) {showTooltip.value = true}ellipsis.value.style['-webkit-line-clamp'] = props.lineemit('expand', false)}
}
</script>
<template><Tooltipv-if="showTooltip":max-width="defaultTooltipMaxWidth":fontSize="tooltipFontSize":color="tooltipColor":backgroundColor="tooltipBackgroundColor":overlayStyle="tooltipOverlayStyle"><template #title><slot name="tooltip"><slot></slot></slot></template><divref="ellipsis"class="m-ellipsis":class="[line ? 'ellipsis-line' : 'not-ellipsis-line', {'cursor-pointer': trigger === 'click'}]":style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"@click="trigger === 'click' ? onExpand() : () => false"v-bind="$attrs"><slot></slot></div></Tooltip><divv-elseref="ellipsis"class="m-ellipsis":class="[line ? 'ellipsis-line' : 'not-ellipsis-line', {'cursor-pointer': trigger === 'click'}]":style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"@click="trigger === 'click' ? onExpand() : () => false"v-bind="$attrs"><slot></slot></div>
</template>
<style lang="less" scoped>
.m-ellipsis {font-size: 14px;line-height: 1.5714285714285714;overflow: hidden;cursor: text;
}
.ellipsis-line {display: -webkit-inline-box;-webkit-box-orient: vertical;
}
.not-ellipsis-line {display: inline-block;vertical-align: bottom;white-space: nowrap;text-overflow: ellipsis;
}
.cursor-pointer {cursor: pointer;
}
</style>

在要使用的页面引入

<template><div><h1>Ellipsis 文本省略</h1><h2 class="mt30 mb10">基本使用</h2><Ellipsis :maxWidth="240">住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪</Ellipsis><h2 class="mt30 mb10">多行省略</h2><Ellipsis :line="2">电灯熄灭 物换星移 泥牛入海<br>黑暗好像 一颗巨石 按在胸口<br>独脚大盗百万富翁 摸爬滚打<br>黑暗好像 一颗巨石 按在胸口</Ellipsis><h2 class="mt30 mb10">展开方式</h2><Ellipsis trigger="click" :line="2">电灯熄灭 物换星移 泥牛入海<br>黑暗好像 一颗巨石 按在胸口<br>独脚大盗百万富翁 摸爬滚打<br>黑暗好像 一颗巨石 按在胸口</Ellipsis><h2 class="mt30 mb10">定制 Tooltip 内容</h2><Ellipsis :max-width="240">住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪<template #tooltip><div style="text-align: center">《秦皇岛》<br>住在我心里孤独的<br>孤独的海怪 痛苦之王<br>开始厌倦深海的光 停滞的海浪</div></template></Ellipsis></div>
</template>