Truncate

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

Basic Usage

With the custom ellipsis

With the onTruncate

Example usage in Card

HTML markdown support

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

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