FxEllipsis 溢出提示

文本超出容器宽度时自动截断并显示 tooltip，基于 useOverflowDetection。

基础用法

<FxCard header="FxEllipsis 溢出检测">
  <div class="flex flex-col gap-4" style="max-width: 240px">
    <div>
      <p class="mb-1 text-sm" style="color: var(--color-text-secondary)">正常显示（不溢出）</p>
      <FxEllipsis content="短文本">短文本</FxEllipsis>
    </div>
    <div>
      <p class="mb-1 text-sm" style="color: var(--color-text-secondary)">溢出时显示 tooltip</p>
      <FxEllipsis content="这是一段很长很长的文本，超出容器宽度时会自动截断并显示 tooltip 提示">
        这是一段很长很长的文本，超出容器宽度时会自动截断并显示 tooltip 提示
      </FxEllipsis>
    </div>
  </div>
</FxCard>

Props

属性	类型	默认值	说明
content	string	—	tooltip 显示的完整内容

插槽

插槽	说明
default	实际渲染的文本，超出宽度时省略号截断

实现原理

内部使用 useOverflowDetection 通过 ResizeObserver 检测 scrollWidth > clientWidth，仅在溢出时启用 tooltip。