Text
Used for text.
Basic
Use the type attribute to define Text's type.
Sizes
Use attribute size to set additional sizes with large, default or small.
Ellipsis
Pass the truncated prop to render an ellipsis when the text exceeds the width of the viewport or max-width set. line-clamp prop to render multiline ellipsis. Starting from version 2.14.6, isTruncated is exposed to indicate whether the text is truncated. You can use it to show a tooltip only when truncation occurs.
Self element set width 100px
Squeezed by parent element
The -webkit-line-clamp CSS property
allows limiting of the contents of
a block to the specified number of lines.
allows limiting of the contents of
a block to the specified number of lines.
Show tooltip only when the text is truncated
Override
Use attribute tag to override element
Mixed
Text mixed component
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| type | text type | enum | — |
| size | text size | enum | default |
| truncated | render ellipsis | boolean | false |
| line-clamp 2.4.0 | maximum lines | string / number | — |
| tag | custom element tag | string | span |
Slots
| Name | Description |
|---|---|
| default | default content |
Exposes
| Name | Description | Type |
|---|---|---|
| isTruncated 2.14.6 | whether the text is truncated | object |
Source
Contributors
