省略号（一行多行）vue3

组件

<template><div ref="tooltipParentRef" class="moreTipText"><el-tooltip:placement="props.placement"effect="dark":enterable="true":show-after="200":offset="10":popper-class="props.textTooltipPopperClass":content="props.content":disabled="disabledTooltip"><spanv-if="!isOpen":class="['tooltip_text',textClassName,!disabledTooltip ? 'tooltip_ellipsis_text' : '',!disabledTooltip ? textEllipsisClassName : '']":style="{ color: color }"style="width: 100%">{{ props.content }}<span v-if="props.fistLevel && props.fistLevel.length >= 0" class="fistLevel">({{ props.fistLevel }})</span><!-- <spanv-if="props.fistLevel && props.fistLevel.length >= 0 && !disabledTooltip"class="fistLevelpos fistLevel">({{ props.fistLevel }})</span> --></span><spanv-else:class="['tooltip_text',textClassName,!disabledTooltip ? 'tooltip_ellipsis_text' : '',!disabledTooltip ? textEllipsisClassName : '']":style="{ color: color }"style="cursor: pointer"@click="openLink">{{ props.content }}</span></el-tooltip></div>
</template><script lang="ts" setup>
import { ref, watch } from "vue"
const props = defineProps({content: {type: String,default: ""},width: {type: String,default: ""},line: {type: Number,default: 1},textClassName: {type: String,default: ""},textEllipsisClassName: {type: String,default: ""},textTooltipPopperClass: {type: String,default: "default_text-tooltip_popper"},color: {type: String,default: ""},isOpen: {type: Boolean,default: false},url: {type: String,default: ""},fistLevel: {type: String,default: ""},placement: {type: String,default: "top"}
})
const disabledTooltip = ref(true)
const tooltipParentRef = ref()
// 判断当前行文本是否移除
const isEllipsisActive = () => {// getClientRects详细介绍以及案例：https://blog.csdn.net/HeMister/article/details/137640173const DOMRectList = tooltipParentRef.value? tooltipParentRef.value.children[0].getClientRects(): []// DOMRectList.length > = props.line 说明超出显示的行数if (DOMRectList.length == 1) {return DOMRectList[0].width <= tooltipParentRef.value.clientWidth} else {return DOMRectList.length <= props.line}
}
watch(() => props.content,() => {updateStatus()},{immediate: true}
)
function updateStatus() {setTimeout(() => {disabledTooltip.value = isEllipsisActive()})
}const openLink = () => {window.open(props.url, "_blank")
}defineExpose({updateStatus
})
</script>
<style lang="scss" scoped>
.tooltip_text {word-break: break-all;
}
.tooltip_ellipsis_text {&::before {content: "";display: block;}
}
.isacitve {position: relative !important;padding-right: 15px;
}
.fistLevel {font-family: PingFangSC-Medium;font-weight: 500;font-size: 14px;color: #303133;
}
.fistLevelpos {position: absolute;right: -1px;top: 0px;
}
.moreTipText {overflow: hidden;text-overflow: ellipsis;
}
</style>

使用

# 一行

<div class="info-item_box-item" style="margin-bottom: 20px"><img :src="detailData.logo" alt="" class="logo" v-if="detailData.logo" /><svg-icon icon-class="default_firm" size="46px" style="margin-right: 16px" v-else /><div style="width: calc(100% - 118px); display: flex; align-items: center"><newTooltipText:content="detailData[item.code]":line="1"textTooltipPopperClass="table_tooltip2"v-slot="slotProps"><spanclass="line_ellipsis_1 info-item_value firm_title"@mouseover.self="slotProps.mouseoverSelf">{{ detailData[item.code] }}</span></newTooltipText></div>.line_ellipsis_1 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}.table_tooltip2 {max-width: 400px;white-space: pre-wrap;
}

1、父元素设置宽度

2、 :line="1"

3、单行省略号

.line_ellipsis_1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

# 多行

 <div style="width: calc(100% - 118px)"><newTooltipText:content="detailData[item.code]":line="2"textTooltipPopperClass="table_tooltip2"v-slot="slotProps"><spanclass="line_ellipsis_2 info-item_value"@mouseover.self="slotProps.mouseoverSelf">{{ detailData[item.code] }}</span></newTooltipText></div>.line_ellipsis_2 {line-height: 24px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}
.table_tooltip2 {max-width: 400px;white-space: pre-wrap;
}

1、父元素设置宽度

2、 :line="2"

3、单行省略号

.line_ellipsis_2 {

line-height: 24px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box; //单行没有

-webkit-line-clamp: 2;; //单行没有

-webkit-box-orient: vertical;; //单行没有

}