Ellipsis
Text ellipsis wrapper
Default
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
html
<template>
<HLEllipsis id="default-example" :tooltipProps="{width: 400}">{{ yourtexthere }}</HLEllipsis>
</template>
<script setup lang="ts">
import { HLEllipsis } from '@platform-ui/highrise'
</script>Line Clamp
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
html
<template>
<HLEllipsis id="line-clamp-example" :tooltipProps="{width: 400}" :line-clamp="2">{{ yourtexthere }}</HLEllipsis>
</template>
<script setup lang="ts">
import { HLEllipsis } from '@platform-ui/highrise'
</script>Expand On Trigger (click)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
html
<template>
<HLEllipsis id="expand-click-example" :tooltipProps="false" :line-clamp="2" :expand-on="'click'">{{ yourtexthere }}</HLEllipsis>
</template>
<script setup lang="ts">
import { HLEllipsis } from '@platform-ui/highrise'
</script>Tooltip Customization
The ellipsis component supports rich tooltip customization through the tooltipProps and custom content through slots.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
html
<template>
<HLEllipsis
id="custom-tooltip-example"
:tooltipProps="{
placement: 'right', // Position tooltip to the right
trigger: 'hover', // Show on hover
width: 300, // Fixed width in pixels
delay: 100, // Show after 100ms
offset: 12 // 12px away from the text
}"
:line-clamp="2"
>
<template #tooltip> Hi there! I am a custom tooltip. </template>
{{ longText }}
</HLEllipsis>
</template>
<script setup lang="ts">
import { HLEllipsis } from '@platform-ui/highrise'
</script>Imports
ts
import { HLEllipsis } from '@platform-ui/highrise'Props
| Name | Type | Default | Description |
|---|---|---|---|
| id * | string | undefined | undefined | The unique identifier of the element |
| expandOn | 'click' | 'hover' | 'focus' | 'manual' | undefined | undefined | Determines the event that triggers the expansion of the ellipsis |
| lineClamp | number | 1 | The number of lines to clamp the text to before applying the ellipsis |
| tooltipProps | boolean | EllipsisTooltipProps | undefined | undefined | Properties to be passed to the tooltip component. Set to false to disable tooltip |
| showTooltip | boolean | true | Whether to show a tooltip when the text is truncated |
EllipsisTooltipProps
| Property | Type | Default | Description |
|---|---|---|---|
| placement | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'top' | Position of the tooltip relative to the element |
| trigger | 'hover' | 'click' | 'focus' | 'manual' | 'hover' | Event that triggers the tooltip |
| width | number | undefined | undefined | Width of the tooltip in pixels |
| delay | number | 0 | Delay in milliseconds before showing the tooltip |
| duration | number | 0 | Duration in milliseconds the tooltip remains visible |
| offset | number | 6 | Distance in pixels between tooltip and target element |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | The default content slot |
| tooltip | () | The content of the ellipsis' tooltip. Use this slot to provide custom tooltip content |