> ## 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.

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

## Truncate one line

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

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

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

## Limit the number of lines

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

```tsx theme={null}
import { Text } from 'twenty-ui/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/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 are also accepted.

<ParamField body="lineClamp" type="number">
  Maximum number of lines before the text is truncated with an ellipsis.
  Cannot be combined with `truncate`.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

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