MutilineText ​

<template>
  <mutiline-text :value="text" :rows="2" width="200px" />
</template>

<script lang="ts" setup>
const text =
  'This is a long text that will be clamped to two lines. When the text exceeds the specified number of rows, it will be truncated with an ellipsis and the full content will be shown in a tooltip on hover.'
</script>

<template>
  <div style="display: flex; gap: 16px">
    <mutiline-text :value="text" :rows="3" width="150px" />
    <mutiline-text :value="text" :rows="3" width="300px" />
  </div>
</template>

<script lang="ts" setup>
const text =
  'This is a demonstration of the MultilineText component with different container widths. The text will be clamped based on the rows prop.'
</script>

<template>
  <mutiline-text :value="text" :rows="2" width="200px" :show-mark="true" />
</template>

<script lang="ts" setup>
const text =
  'This is a long text with the show-mark option enabled. An ellipsis indicator will appear in the bottom-right corner when text is clamped.'
</script>

<template>
  <mutiline-text :value="text" :rows="2" width="220px" placement="right">
    <span style="color: var(--el-color-primary)">{{ text }}</span>
    <template #content>
      <div style="max-width: 260px">
        <div style="font-weight: 600; margin-bottom: 4px">Full content</div>
        <div>{{ text }}</div>
      </div>
    </template>
  </mutiline-text>
</template>

<script lang="ts" setup>
const text =
  'This example uses the default slot to customize the visible text style and the content slot to render richer tooltip content when the text is clamped.'
</script>