DEV Community

Truncating Text using Chakra UI

Esther Adebayo on May 20, 2021

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

Read full post

Sivarajan • Nov 3 '22 • 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)

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>