Text

import { TextDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Text);

Usage

Truncate

Set the truncate prop to add text-overflow: ellipsis styles:

Line clamp

Specify the maximum number of lines with the lineClamp prop. This option uses -webkit-line-clamp CSS property (caniuse). Note that padding-bottom cannot be set on the text element:

Line clamp can also be used with any children (not only strings), for example with Typography:

Inherit styles

Text always applies font-size, font-family and line-height styles, but in some cases this is not the desired behavior. To force Text to inherit parent styles, set the inherit prop. For example, highlight part of Title:

<Polymorphic defaultElement="p" changeToElement="a" component="Text" />

span prop

Use the span prop as a shorthand for component="span":

import { Text } from '@mantine/core';

function Demo() {
  return (
    <>
      <Text span>Same as below</Text>
      <Text component="span">Same as above</Text>
    </>
  );
}