35 lines
718 B
Vue
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>
|