> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text

> Render text with single-line truncation or a limited number of lines.

export const StoryEmbed = ({storyId, title, height = 120}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`Text` provides overflow handling. It renders a `div` by default and inherits typography from its surroundings.

<StoryEmbed storyId="ui-typography-text--display" title="Text example" height={90} />

## Usage

Give the text a constrained width, then set `truncate` to show an ellipsis when it overflows:

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const ContactName = () => (
  <Text truncate style={{ maxWidth: 160 }}>
    Alexandra Montgomery
  </Text>
);
```

## Limit the number of lines

<StoryEmbed storyId="ui-typography-text--catalog" title="Text overflow options" height={210} />

Use `lineClamp` with a positive integer. Choose either `truncate` or `lineClamp`; their props are mutually exclusive.

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const Summary = () => (
  <Text lineClamp={2} style={{ maxWidth: 240 }}>
    Follow up with the customer about their onboarding milestones and upcoming
    renewal.
  </Text>
);
```

## Choose an element

Use `render` when the text needs another semantic element:

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const Description = () => (
  <Text render={<p />}>Account description</Text>
);
```

Truncation affects the visual presentation; it does not shorten the text in the DOM. Provide a way to read the full content when the visible portion is insufficient.

## Props

Native attributes, children, refs, class names, and styles target the rendered text element. `TextProps` is exported from `twenty-ui/primitives/typography`. Text content is rendered unchanged, including caller-provided links.

<ParamField body="lineClamp" type="number">
  Positive integer limiting the number of visible lines. Cannot be combined with `truncate`.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>">
  Replaces the default div. Native props and the ref target the rendered text element.
</ParamField>

<ParamField body="truncate" type="boolean">
  Truncates one line with an ellipsis. Cannot be combined with `lineClamp`.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.