Edit page

Text

Text is a tiny component to control wrapping of text content.

Basic Usage

To implement the Text component, you need to import it first:

import { Text } from '@react-ui-org/react-ui';

And use it:

See API for all available options.

General Guidelines

  • Use Text anytime you need to control potentially long strings and prevent them from overflowing or breaking their container.

  • By default, Text doesn't alter rendering of its content. Use available options to achieve the result you need.

  • Text renders as <span> by default, so it can only contain inline-level HTML elements (like <strong> or <a>, but not <div>, <p>, or <h2>). If necessary, use the blockLevel option to render as <div> to keep your HTML valid.

  • Use Text for short pieces of text content. Including a couple of HTML tags shouldn't cause any harm, but keep in mind Text is not intended to wrap complex HTML structures or even React components.

Number of Lines

Specify how many lines of text should be visible if content doesn't fit its container. If the number of lines is exceeded, the content is truncated and appended by an ellipsis ().

Word Wrapping

There are three possible ways of controlling wrapping of long words if they do not fit on a line. Set wordWrapping to one of the following values:

  • normal: Do not force any wrapping (default behavior).

  • long-words: To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line.

  • anywhere: Create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

📖 Read more about wrapping and breaking text at MDN.

Hyphens

The hyphens option specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

👉 The auto setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules. You must specify a language using the lang HTML attribute (e.g. on <html> tag) to guarantee that automatic hyphenation is applied in that language.

👉 Manually suggested line break opportunities will override automatic break point selection in auto mode when present.

📖 Read more about hyphens CSS property at MDN.

API

Prop nameTypeDefaultRequiredDescription
blockLevelboolfalsefalse

If true, the root HTML element renders as <div> instead of <span>.

childrennodenullfalse

Text content to be sanitized. Can contain HTML.

hyphens'none' │ 'auto' │ 'manual''none'false

Turn on hyphenation. Head to Hyphens to learn more.

idstringundefinedfalse

Optional ID of the root HTML element.

linesnumberundefinedfalse

Optional number of lines. If exceeded, the content is truncated and appended by an ellipsis ().

wordWrapping'normal' │ 'long-words' │ 'anywhere''normal'false

How to deal with long words. Head to Word Wrapping for detailed explanation.