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

1. 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.
Edit code

Usage

Text

import React from "react";
import { Text } from "@commure/components-foundation";
function MyText() {
  return (
    <Text ellipsize>
      Sample Text
    </Text>
  );
}
export default MyText;

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