<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>
