Text
Introduction
The Text
component adds accessible overflow behavior to a line of text by
conditionally adding the title attribute and truncating with an ellipsis when content overflows its container.
The below information is a snippet from the
related section in the Blueprint reference documentation.
Included Components
Text
: Accepts and renders arbitrary children. It is intended that these children render as text.
Examples
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis eget nunc lobortis mattis aliquam faucibus. Integer vitae justo eget magna fermentum. Amet nisl purus in mollis nunc sed id semper. Convallis tellus id interdum velit laoreet id. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat. Sed egestas egestas fringilla phasellus faucibus scelerisque. Eu facilisis sed odio morbi quis commodo odio aenean. Sed cras ornare arcu dui vivamus arcu. Ut morbi tincidunt augue interdum. Quisque egestas diam in arcu cursus euismod quis viverra nibh. Egestas quis ipsum suspendisse ultrices gravida. Congue quisque egestas diam in. Eget nunc scelerisque viverra mauris in aliquam.
Usage
Text
API Reference
Text
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
ellipsize | false | boolean | Indicates that this component should be truncated with an ellipsis if it overflows its container. The `title` attribute will also be added when content overflows to show the full text of the children on hover. |
tagName | false | keyof IntrinsicElements | HTML tag name to use for rendered element. |
Related Reading
Blueprint Reference