# Quote

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<Text>

	His famous quote,{" "}

	<Quote>Styles come and go. Good design is a language, not a style</Quote>,

	elegantly summs up Massimo’s philosophy of design.

</Text>
```

## API Reference

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

| Prop                                                                                                                                                                   | Type                                                      | Default |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                                 | —       |
| `truncate`Truncates text with an ellipsis. Be aware of [common pitfalls](https://css-tricks.com/flexbox-truncated-text/) in flex layouts.                              | `boolean`                                                 | —       |
| `wrap`Controls the wrapping behavior of the text. See the corresponding [text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) values for details.    | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | —       |

## Examples

### Truncate

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

```jsx
<Flex maxWidth="300px">

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

	</Quote>

</Flex>
```