KLongText

示例

Long text with tooltip

This is a very long text that will be truncated when it overflows its container width

Short text (no tooltip)

Short text

Truncates long text and shows a tooltip with the full content when it overflows.

Props

Name	Type	Default	Description
maxLength	number	50	Reserved for future use. Truncation is CSS-based.
class	string	—	Additional CSS classes for the root element.

Emits

Name	Parameters	Description
—	—	This component does not emit custom events.

Slots

Name	Description
default	The text content to display. Will be truncated with ellipsis if it overflows.

Basic Usage

<script setup>
import { KLongText } from '@kK-2004/ui-component'
</script>

<template>
  <KLongText class="max-w-[200px]">
    This is a very long text that will be truncated with a tooltip showing the full content.
  </KLongText>
</template>