Truncate

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

Basic Usage

Show editable code example

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>

  <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

Show editable code example

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>

    <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

Show editable code example

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>

    <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

Show editable code example

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>
  )
}

() => {
  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.

Show editable code example

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>

<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 Name	Paragon Version	Instance Count
frontend-app-discussions	20.15.0	1
frontend-app-learner-dashboard	20.32.0	1
frontend-lib-content-components	20.32.0	1

Paragon Design System

Theme

PlaygroundBeta

Truncate

Basic Usage

With the custom ellipsis

With the onTruncate

Example usage in Card

HTML markdown support

Props API#

Usage Insights#

Truncate

All components (A-Z)

Theme

PlaygroundBeta

Truncate

Basic Usage#

With the custom ellipsis#

With the onTruncate#

Example usage in Card#

HTML markdown support#

Props API#

Usage Insights#

Truncate

All components (A-Z)

Basic Usage

With the custom ellipsis

With the onTruncate

Example usage in Card

HTML markdown support