Files
GEAR-OA/gear-ui3/src/components/GearTable/renderer/eclipse.vue
2025-09-02 15:03:34 +08:00

35 lines
718 B
Vue

<template>
<div class="eclipse-container">
<el-tooltip :content="text" placement="top" :disabled="text.length < 10">
<span class="eclipse">{{ text }}</span>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'Eclipse',
props: {
text: {
type: String,
required: true
},
}
}
</script>
<style>
.eclipse-container {
position: relative; /* 为tooltip提供定位参考 */
display: inline-block; /* 确保容器只占内容宽度 */
}
.eclipse {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block; /* 确保元素有明确的尺寸 */
max-width: 100%; /* 限制最大宽度,确保溢出效果生效 */
}
</style>