DEV Community

Cover image for Truncating Text using Chakra UI
Esther Adebayo
Esther Adebayo

Posted on

Truncating Text using Chakra UI

#css #html #react #webdev

When designing a component, you might need to truncate the displayed text to a fixed number of lines and show an ellipsis.

This is possible using some CSS properties such as overflow: hidden; and text-overflow: ellipsis;. However, we would be focusing on how to truncate text using Chakra UI.

Alt Text

Example: Let's dive into how to truncate the Text below 

<Text>
  In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
</Text>
Enter fullscreen mode Exit fullscreen mode

There are 2 ways to truncate Text in Chakra UI:

1. Passing isTruncated prop

The isTruncated prop renders an ellipsis(...) when the text exceeds the width of the viewport or maxWidth prop.

<Text isTruncated>
  In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
</Text>
Enter fullscreen mode Exit fullscreen mode

See truncated text below
Alt Text

Note that when using this prop, responsive truncation is automatically set across all screens.

2. Passing noOfLines prop

Just as the name implies, this prop is used to truncate the text to a specific number of lines. Simply pass the noOfLines prop and set it to the desired no of lines.

<Text noOfLines={3}>
  In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
</Text>
Enter fullscreen mode Exit fullscreen mode

Setting responsiveness using noOfLines
You may want to specify the number of lines the text should be truncated to on different devices. Doing this is pretty straightforward using Chakra's Array Syntax

<Text noOfLines={[1,2]}>
  In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
</Text>
Enter fullscreen mode Exit fullscreen mode

See truncated text on Desktop
Alt Text

See truncated text on Mobile
Alt Text

Quick Note: If you are new to Chakra UI and would love to get started, visit the Getting Started Docs

Top comments (1)

Collapse
 
citysiva180 profile image
Sivarajan • • Edited

I have been trying to wrap fonts inside a table in chakra ui and had been not successful. Is there a way to do it? Here is my code and my website image

As you could see in this image... all data comes to this table via table_data[1] object. But I want the column width to be uniform and should come within the visible width of the container. The fonts are not wrapping and its overflowing. Due to this the table cell is automatically going for a scroll. Its not wrapping the content within the cell. Could you help me find out what css property or chakra ui property I could add?


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta2pqsazlkxm7titl5bq.png)
Enter fullscreen mode Exit fullscreen mode

Here is my code

  <TableContainer overflowWrap="normal">
        <Table variant="simple">
          <Thead>
            <Tr>
              <Th>S.NO</Th>
              <Th>DESCRIPTION</Th>
              <Th>ORM SYNTAX</Th>
              <Th>FUNCTIONALITY</Th>
            </Tr>
          </Thead>
          <Tbody>
            {table_data[1].map((data, i) => (
              <Tr key={i}>
                <Td>{i + 1}</Td>
                <Td>
                  <Text>{data["DESCRIPTION"]}</Text> // wishing to add some property here to wrap the text 
                </Td>

                <Td>
                  <pre>
                    <code>{data["ORM SYNTAX"]}</code>
                  </pre>
                </Td>
                <Td>
                  <Text>{data["FUNCTIONALITY"]}</Text> // wishing to add some property here to wrap the text 
                </Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
Enter fullscreen mode Exit fullscreen mode

Read next

developersai0021 profile image

Glam Up My Markup: Camp Activities

Sai Charith Puligilla -

teddydavidson245 profile image

Camp Activities Glamed Up!

Newbie_Ted -

vidvatek profile image

How to Create Moment JS Calendar in React Native

vidvatek -

18xdeveloper profile image

News admin dashboard

Sheikh Abdur Rohit -