Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Truncate

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.

  <Truncate lines={2}>

    Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons 

    for using the platform and objectives to accomplish. To help members of each group learn about what edX 

    offers, reach goals, and solve problems, edX provides a variety of information resources.

    Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons

    for using the platform and objectives to accomplish. To help members of each group learn about what edX

    offers, reach goals, and solve problems, edX provides a variety of information resources.

  </Truncate>

With the custom ellipsis

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

    <Truncate lines={2} ellipsis="🎉🎉🎉" whiteSpace>

        Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons

        for using the platform and objectives to accomplish. To help members of each group learn about what edX

        offers, reach goals, and solve problems, edX provides a variety of information resources.

    </Truncate>

With the onTruncate

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

    <Truncate lines={2} onTruncate={() => console.log('onTruncate')}>

        Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons

        for using the platform and objectives to accomplish. To help members of each group learn about what edX

        offers, reach goals, and solve problems, edX provides a variety of information resources.

    </Truncate>

Example usage in Card

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

() => {

  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  

  return (

    <Card style={{ width: isExtraSmall ? "100%" : "18rem" }} isClickable>

      <Card.ImageCap

        src="https://picsum.photos/360/200/"

        srcAlt="Card image"

      />

      <Card.Header

        title={

          <Truncate lines={2}>

            Using Enhanced Capabilities In Your Course

          </Truncate>}

      />

      <Card.Section>

        <Truncate lines={4}>

          Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons

          for using the platform and objectives to accomplish. To help members of each group learn about what edX

          offers, reach goals, and solve problems, edX provides a variety of information resources.

        </Truncate>

      </Card.Section>

      <Card.Footer

        textElement={

          <Truncate lines={2}>

            Using Enhanced Capabilities In Your Course

          </Truncate>}

      >

        <Button style={{ minWidth: 100 }}>Action 1</Button>

      </Card.Footer>

    </Card>

  )

}

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.

<Truncate lines={1}>

  <a href="#">Learners</a>, course teams, researchers, developers: the edX community includes <strong class="strong-class"><i class="i-class">groups with <u>a range</u> of <q>reasons</q></i></strong> for using the platform and objectives to accomplish.

</Truncate>

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-discussions20.15.01
frontend-app-learner-dashboard20.32.01
frontend-lib-content-components20.34.01
Leave feedback

Contents

All components (A-Z)