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>

This is a very long text that will be truncated with a tooltip showing the full content.