Ellipsis 文本溢出提示 ​

<template>
  <div style="display: grid; gap: 12px; max-width: 360px">
    <u-ellipsis
      text="这是一段很长的文本：当容器宽度不足以完整展示时，会在悬停时显示 Tooltip。"
    />
    <u-ellipsis text="这段不会溢出，所以不会出现提示" />
  </div>
</template>

<template>
  <div style="max-width: 280px">
    <u-ellipsis placement="top" effect="light">
      <span
        style="
          display: inline-block;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        "
      >
        触发区使用默认插槽自定义渲染；Tooltip 内容也可以通过 content
        插槽自定义。
      </span>

      <template #content>
        <div style="max-width: 240px; line-height: 1.6">
          <div style="font-weight: 600; margin-bottom: 6px">
            自定义 Tooltip 内容
          </div>
          <div>这里可以放多行文本，或任意组件内容。</div>
        </div>
      </template>
    </u-ellipsis>
  </div>
</template>