RTL Support: Full

Accessibility: Full

Translations: Not Needed

Ellipsis

Text ellipsis wrapper

Default

Wrap text in HLEllipsis to truncate it to a single line with a trailing ellipsis. The full text shows in a tooltip on hover.

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.

vue

<template>
  <HLEllipsis id="default-example" :tooltipProps="{ width: 400 }">
    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.
  </HLEllipsis>
</template>

<script setup lang="ts">
  import { HLEllipsis } from '@platform-ui/highrise'
</script>

Line Clamp

Set line-clamp to truncate after a fixed number of lines instead of just one.

vue

<template>
  <HLEllipsis id="line-clamp-example" :tooltipProps="{ width: 400 }" :line-clamp="2">
    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.
  </HLEllipsis>
</template>

<script setup lang="ts">
  import { HLEllipsis } from '@platform-ui/highrise'
</script>

Using `HLText` with `HLEllipsis`

HLEllipsis must be the outer element and the content (plain text, HLText, etc.) must live in its default slot. HLEllipsis measures and truncates whatever it renders in that slot, so the text has to be inside it.

Wrapping it the other way — putting HLEllipsis inside an HLText (or any element that already constrains the box) — will not truncate reliably, because the ellipsis no longer controls the box it is measuring against.

Vue

html

<template>
  <!-- ✅ Correct: HLEllipsis wraps the text -->
  <HLEllipsis id="ellipsis-with-text-example" :line-clamp="2" :tooltipProps="{ width: 400 }">
    <HLText size="md" weight="regular">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.</HLText>
  </HLEllipsis>

  <!-- ❌ Incorrect: HLText wraps HLEllipsis — truncation may not work -->
  <HLText size="md" weight="regular">
    <HLEllipsis id="ellipsis-with-text-example" :line-clamp="2">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.</HLEllipsis>
  </HLText>
</template>

<script setup lang="ts">
  import { HLEllipsis, HLText } from '@platform-ui/highrise'
</script>

Expand On Trigger (`click`)

Set expand-on to let users reveal the full text in place. Here click toggles between clamped and expanded; tooltipProps is false so no tooltip competes with the expand behavior.

vue

<template>
  <HLEllipsis id="expand-click-example" :tooltipProps="false" :line-clamp="2" :expand-on="'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.
  </HLEllipsis>
</template>

<script setup lang="ts">
  import { HLEllipsis } from '@platform-ui/highrise'
</script>

By default a tooltip with the full text appears on hover when the content is truncated. Set :show-tooltip="false" to turn it off — the text still truncates, but hovering shows nothing.

vue

<template>
  <HLEllipsis id="no-tooltip-example" :show-tooltip="false" :line-clamp="1">
    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.
  </HLEllipsis>
</template>

<script setup lang="ts">
  import { HLEllipsis } from '@platform-ui/highrise'
</script>

INFO

:show-tooltip="false" and :tooltipProps="false" both disable the tooltip. Use show-tooltip as the simple on/off switch; pass false to tooltipProps when you're already using that prop and want to turn the tooltip off in the same place (for example alongside expand-on, so the expand behavior isn't competing with a tooltip).

The ellipsis component supports rich tooltip customization through tooltipProps and custom content through slots. See EllipsisTooltipProps for the full list of accepted props — including placement, width, and the delay / duration timing controls.

vue

<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, // Wait 100ms on hover before showing
      duration: 1000, // Wait 1000ms after the pointer leaves before hiding
      variant: 'light'
    }"
    :line-clamp="2"
  >
    <template #tooltip> Hi there! I am a custom tooltip. </template>
    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.
  </HLEllipsis>
</template>

<script setup lang="ts">
  import { HLEllipsis } from '@platform-ui/highrise'
</script>

Accessibility

When HLEllipsis truncates meaningful copy, pass the full value through aria-label or title so it can be read without expanding the UI.
Tie supporting helper text or tooltips back to the trigger via aria-describedby to explain why content is shortened.

Imports

import { HLEllipsis } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id	`string`	`'hr-ellipsis-id'`	The unique identifier of the element
expandOn	`'click' \| undefined`	`undefined`	The event that triggers in-place expansion of the truncated text. Only `'click'` is supported
lineClamp	`number \| string \| undefined`	`undefined`	The number of lines to clamp the text to before applying the ellipsis. When unset, the text truncates to a single line
tooltipProps	`boolean \| EllipsisTooltipProps \| undefined`	`{}`	Properties passed to the tooltip. Set to `false` to disable the tooltip
showTooltip	`boolean`	`true`	Whether to show a tooltip when the text is truncated

EllipsisTooltipProps

EllipsisTooltipProps accepts the same props as HLTooltip/HLPopover. The most common ones:

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 \| 'trigger' \| undefined`	`undefined`	Fixed width of the tooltip in pixels (or `'trigger'` to match)
maxWidth	`number \| undefined`	`undefined`	Maximum width of the tooltip in pixels
minWidth	`number \| undefined`	`undefined`	Minimum width of the tooltip in pixels
delay	`number`	`100`	Delay in milliseconds before showing the tooltip
duration	`number`	`100`	Delay in milliseconds before hiding the tooltip

Slots

Name	Parameters	Description
default	`()`	The default content slot
tooltip	`()`	The content of the ellipsis' tooltip. Use this slot to provide custom tooltip content

Ellipsis

Default

Line Clamp

Using `HLText` with `HLEllipsis`

Expand On Trigger (`click`)

Disable the Tooltip

Tooltip Customization

Accessibility

Imports

Props

EllipsisTooltipProps

Slots

Ellipsis ​

Default ​

Line Clamp ​

Using HLText with HLEllipsis ​

Expand On Trigger (click) ​

Disable the Tooltip ​

Tooltip Customization ​

Accessibility ​

Imports ​

Props ​

EllipsisTooltipProps ​

Slots ​

Ellipsis

Default

Line Clamp

Using `HLText` with `HLEllipsis`

Expand On Trigger (`click`)

Disable the Tooltip

Tooltip Customization

Accessibility

Imports

Props

EllipsisTooltipProps

Slots