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}>
        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.
    </Truncate>

With the onTruncate

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.
    </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.
    </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.

QUESTION FOR KEVIN: Would this fail screen readers anyway?

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 React.ReactNode Required
The expected text to which the ellipsis would be applied.
lines number
The number of lines the text to be truncated to.
Default1

Usage Insights#

Truncate

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	3
frontend-app-course-authoring	22.8.1	14
frontend-app-learner-portal-enterprise	21.13.1	18

Edit this page Leave feedback

Paragon Design System

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)

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