Theme

npm_versionnpm Paragon package page

A Truncate component can help you crop multiline text. There will be three dots at the end of the text.

Basic Usage

Any Paragon component or export may be added to the code example.

With the custom ellipsis

Any Paragon component or export may be added to the code example.

With the onTruncate

Any Paragon component or export may be added to the code example.

Example usage in Card

Any Paragon component or export may be added to the code example.

HTML markdown support

Note: Truncate supports only plain HTML children and not jsx.

Any Paragon component or export may be added to the code example.

Props API#

Truncate Props API
  • children string Required

    The expected text to which the ellipsis would be applied.

  • lines string | number

    The number of lines the text to be truncated to.

    Default1
  • ellipsis string | number | node

    Text content for the ellipsis - will appear after the truncated lines.

    Default'...'
  • whiteSpace bool

    Adds the whitespace from before the ellipsis.

    Defaultfalse
  • elementType string

    Custom html element for truncated text.

    Default'div'
  • className string

    Specifies class name to append to the base element.

  • onTruncate func

    Callback fired when a text truncating

Usage Insights#

Truncate

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.13
frontend-app-course-authoring22.6.112
frontend-app-learner-dashboard22.6.13
frontend-app-learner-portal-enterprise21.13.118
frontend-lib-content-components22.0.02