This content originally appeared on DEV Community and was authored by Esther Agbaje
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.
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>
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>
See truncated text below
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>
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>
See truncated text on Desktop
See truncated text on Mobile
Quick Note: If you are new to Chakra UI and would love to get started, visit the Getting Started Docs
This content originally appeared on DEV Community and was authored by Esther Agbaje
Esther Agbaje | Sciencx (2021-05-20T15:41:51+00:00) Truncating Text using Chakra UI. Retrieved from https://www.scien.cx/2021/05/20/truncating-text-using-chakra-ui/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.