## Text  
Use the Text component to display text and links with Mantine's theme styles.  
Category: Typography  

### Usage

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.Text("Extra small text", size="xs"),
        dmc.Text("Small text", size="sm"),
        dmc.Text("Default text", size="md"),
        dmc.Text("Large text", size="lg"),
        dmc.Text("Extra large text", size="xl"),
        dmc.Text("Semi bold", fw=500),
        dmc.Text("Bold", fw=700),
        dmc.Text("Underlined", td="underline"),
        dmc.Text("Red text", c="red"),
        dmc.Text("Blue text", c="blue"),
        dmc.Text("Gray text", c="gray"),
        dmc.Text("Uppercase", tt="uppercase"),
        dmc.Text("capitalized text", tt="capitalize"),
        dmc.Text("Aligned to center", ta="center"),
        dmc.Text("Aligned to right", ta="right"),
    ]
)
```
### Dimmed Text

Text supports special dimmed value in `color` prop. It sets color to theme.colors.dark[2] in dark theme and to 
theme.colors.gray[6] in light.

```python
import dash_mantine_components as dmc

component = dmc.Text("Dimmed text", c="dimmed")
```
### Gradient

```python
import dash_mantine_components as dmc

component = dmc.Center(
    children=[
        dmc.Text(
            "Indigo cyan gradient",
            variant="gradient",
            gradient={"from": "red", "to": "yellow", "deg": 45},
            style={"fontSize": 40},
        )
    ]
)
```
### Truncate

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

```python
import dash_mantine_components as dmc

content = """
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id
necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam
perspiciatis excepturi iste sint itaque sunt laborum. Nihil?
"""

component = dmc.Box(
    [
        dmc.Title("truncate='end'", order=5),
        dmc.Text(content, truncate="end"),
        
        dmc.Title("truncate='start'", order=5, mt="lg"),
        dmc.Text(content, truncate="start"),
    ],
    w=300
)
```
### Lineclamp

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

### Inherit styles

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

```python
import dash_mantine_components as dmc

component = dmc.Title(
    children = [
        "Title in which you want to ",
        dmc.Text("highlight", span=True, c="blue", inherit=True),
        " something."
    ]
)
```
### span prop
The root element of `Text` is an HTML `p` component.  To change it to an HTML `span` set the `span` prop to True.


```python
import dash_mantine_components as dmc


component = dmc.Box([
    dmc.Text("These two Text components are inline elements ", span=True, bd="1px solid"),
    dmc.Text("and only take up as much space as needed", span=True,  bd="1px solid"),

    dmc.Divider(my="lg"),

    dmc.Text("These two Text components are block elements",  bd="1px solid"),
    dmc.Text("and take up the full width of their container.",  bd="1px solid")
])
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Text Selectors

| Selector | Static selector       | Description     |
|----------|-----------------------|-----------------|
| root     | .mantine-Text-root    | Root element    |

#### Text CSS Variables

| Selector | Variable               | Description                               |
|----------|------------------------|-------------------------------------------|
| root     | --text-fz              | Controls font-size property               |
|          | --text-lh              | Controls line-height property             |
|          | --text-gradient        | Text fill gradient                        |
|          | --text-line-clamp      | Number of lines that should be visible    |

#### Text Data Attributes

| Selector | Attribute       | Condition                          | Value                 |
|----------|----------------|------------------------------------|-----------------------|
| root     | data-truncate  | truncate prop is set               | Value of truncate prop |
| root     | data-line-clamp | lineClamp prop is a number         | –                     |
| root     | data-inline    | inline prop is set                 | –                     |
| root     | data-inherit   | inherit prop is set                | –                     |




### Keyword Arguments
#### Text

- children (a list of or a singular dash component, string or number; optional):
    Content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- gradient (dict; optional):
    Gradient configuration, ignored when `variant` is not `gradient`,
    `theme.defaultGradient` by default.

    `gradient` is a dict with keys:

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- inherit (boolean; optional):
    Determines whether font properties should be inherited from the
    parent, `False` by default.

- inline (boolean; optional):
    Sets `line-height` to 1 for centering, `False` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- lineClamp (number; optional):
    Number of lines after which Text will be truncated.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- size (optional):
    Controls `font-size` and `line-height`, `'md'` by default.

- span (boolean; optional):
    Shorthand for `component="span"`, `False` by default, default
    root element is `p`.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- truncate (boolean; optional):
    Side on which Text must be truncated, if `True`, text is truncated
    from the start.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.