# mds-text ## Properties | Property | Attribute | Description | Type | Default | | ------------ | ------------ | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `animation` | `animation` | Specifies if the text is animated when it is rendered | `"none" \| "yugop" \| undefined` | `'none'` | | `tag` | `tag` | Specifies the HTML tag of the element | `"strong" \| "code" \| "s" \| "em" \| "abbr" \| "address" \| "article" \| "b" \| "bdo" \| "blockquote" \| "cite" \| "dd" \| "del" \| "details" \| "dfn" \| "div" \| "dl" \| "dt" \| "figcaption" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "i" \| "ins" \| "kbd" \| "label" \| "legend" \| "li" \| "mark" \| "ol" \| "p" \| "pre" \| "q" \| "rt" \| "ruby" \| "samp" \| "small" \| "span" \| "sub" \| "summary" \| "sup" \| "time" \| "u" \| "ul" \| "var" \| "rb"` | `undefined` | | `text` | `text` | Specifies the text string to the component instead of passing an HTML node | `string \| undefined` | `undefined` | | `truncate` | `truncate` | Specifies if the text shoud be truncated or should behave as a normal text | `"all" \| "none" \| "word" \| undefined` | `undefined` | | `typography` | `typography` | Specifies the font typography of the element | `"action" \| "caption" \| "detail" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "hack" \| "label" \| "option" \| "paragraph" \| "snippet" \| "tip"` | `'detail'` | | `variant` | `variant` | Specifies the variant for `typography` | `"code" \| "info" \| "read" \| "title" \| undefined` | `undefined` | ## Slots | Slot | Description | | ----------- | -------------------------------------------------------------------------------------- | | `"default"` | Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here. | ## CSS Custom Properties | Name | Description | | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--mds-text-animation-placeholder-char` | Sets the animation placeholder char of the text when `animation` attribute is set to `yugop` | | `--mds-text-animation-speed` | Sets the animation speed of the text when `animation` attribute is set to `yugop` | | `--mds-text-line-clamp` | Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate='all' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes. | | `--mds-text-selection-background` | Sets the background-color of the text when the text is selected | | `--mds-text-selection-color` | Sets the color of the text when the text is selected | ---------------------------------------------- Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)