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

Truncate Props API
  • children string Required Required

    The expected text to which the ellipsis would be applied.

  • lines string Required | number Required Required

    The number of lines the text to be truncated to.

    Default1
  • ellipsis string Required | number Required | node Required Required

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

    Default'...'
  • whiteSpace bool Required

    Adds the whitespace from before the ellipsis.

    Defaultfalse
  • elementType string Required

    Custom html element for truncated text.

    Default'div'
  • className string Required

    Specifies class name to append to the base element.

  • onTruncate func Required

    Callback fired when a text truncating