Truncate Text

The truncate text component lets you truncate a large text by number of lines.

Examples

<gl-truncate-text show-more-text="Show more" show-less-text="Show less" :lines="3" :mobile-lines="6">
  Veritatis sapiente omnis. Voluptas quidem dolore dolores reiciendis animi quibusdam mollitia ut quia. Non aut blanditiis aliquid voluptas. Perspiciatis occaecati atque qui architecto consectetur voluptatibus ut. Quidem modi aliquid eum. Eum fugit mollitia neque laborum. Porro eum non occaecati voluptatem. Perspiciatis corrupti deserunt veritatis. Voluptas vel dolores. Quia cumque animi sed non rem assumenda quasi in voluptas. Nam et quia vero eum assumenda. Nihil totam ducimus magnam quam quam qui atque optio recusandae. Similique assumenda vero. Vitae hic harum aliquid sequi. Ut non non. Aut et quod. Quis qui accusamus tempore sed assumenda voluptatem porro deserunt. Consequatur et quidem a eos quis et similique occaecati occaecati. Quia soluta dolorum est. speriores voluptatibus odio voluptas sed dolore ad sint. Est id repellendus voluptatum ducimus ducimus doloremque. Porro consequuntur quia.
</gl-truncate-text>

Code reference

The GlTruncateText component lets you truncate a large text by number of lines. The last line ends with an ellipsis if the text is truncated. Truncation can be toggled by the Show more / Show less button. The button will not be shown when no truncation is necessary. There is a separate property to set the number of lines initially shown on small screens. Use the showMoreText and showLessText properties to provide translated strings.

Caveats

When the size of the window is large, and the text is displayed on a number of lines greater than the value of the lines property, but smaller than the value of the mobileLines property, and the Show more button has been clicked to show the entire content of the text, and the window is resized to a small size, then instead of disappearing, the Show less button will remain visible and will do nothing when clicked.

GlTruncateText

import { GlTruncateText } from '@gitlab/ui';

Props

Name
Description
Default

showMoreText

string The text for the 'Show more' button

'Show more'

showLessText

string The text for the 'Show less' button

'Show less'

lines

number The number of lines that are initially visible on larger screens

3

mobileLines

number The number of lines that are initially visible on smaller screens

10

toggleButtonProps

object Props that are passed to the toggle button

{}

Slots

Name
Description
default

Text content

Last updated at: