# Em

Marks text to stress emphasis.

```jsx
<Text>
  We <Em>had</Em> to do something about it.
</Text>
```

## [API Reference](#api-reference)

This component is based on the `em` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop       | Type                                                      | Default          |
| ---------- | --------------------------------------------------------- | ---------------- |
| `asChild`  | `boolean`                                                 | No default value |
| `truncate` | `boolean`                                                 | No default value |
| `wrap`     | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | No default value |

## [Examples](#examples)

### [Truncate](#truncate)

Use the `truncate` prop to truncate text with an ellipsis when it overflows its container.

```jsx
<Flex maxWidth="300px">
  <Em truncate>
    The goal of typography is to relate font size, line height, and line width in a proportional way
    that maximizes beauty and makes reading easier and more pleasant.
  </Em>
</Flex>
```

<!--$-->

<!--/$-->