feat:任务大纲卡片超出3行提示框设置最大宽度

This commit is contained in:
liailing1026
2026-01-10 22:07:23 +08:00
parent 920588b063
commit 82e92f12aa

View File

@@ -1,5 +1,11 @@
<template> <template>
<el-tooltip :disabled="!isOverflow" effect="light" placement="top" :content="text"> <el-tooltip
:disabled="!isOverflow"
effect="light"
placement="top"
:content="text"
popper-class="multi-line-tooltip-popper"
>
<div <div
ref="containerRef" ref="containerRef"
class="multi-line-ellipsis" class="multi-line-ellipsis"
@@ -28,7 +34,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
text: '', text: '',
lines: 3, lines: 3,
maxWidth: '100%', maxWidth: '100%'
}) })
const isOverflow = ref(false) const isOverflow = ref(false)
@@ -45,8 +51,8 @@ const containerStyle = computed(
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
lineHeight: '1.5', lineHeight: '1.5',
wordBreak: 'break-all', wordBreak: 'break-all'
}) as HTMLAttributes['style'], } as HTMLAttributes['style'])
) )
// 检查文字是否溢出 // 检查文字是否溢出
@@ -91,3 +97,9 @@ onMounted(() => {
white-space: normal; white-space: normal;
} }
</style> </style>
<style>
.multi-line-tooltip-popper {
max-width: 400px;
}
</style>