El Text

Text Component

Text component provides styled text display with various options.

When to Use

• Styled text display
• Truncated text
• Semantic text types
• Text with sizes

Basic Usage

<template>
  <el-text>Default text</el-text>
  <el-text type="primary">Primary text</el-text>
  <el-text type="success">Success text</el-text>
  <el-text type="warning">Warning text</el-text>
  <el-text type="danger">Danger text</el-text>
  <el-text type="info">Info text</el-text>
</template>

Sizes

<template>
  <el-text size="large">Large text</el-text>
  <el-text>Default text</el-text>
  <el-text size="small">Small text</el-text>
</template>

Truncated

<template>
  <el-text truncated>
    This is a very long text that will be truncated with ellipsis when it exceeds the container width
  </el-text>
</template>

Line Clamp

<template>
  <el-text :line-clamp="2">
    This is a very long text that will be clamped to 2 lines with ellipsis when it exceeds the container width. This is a very long text that will be clamped to 2 lines with ellipsis when it exceeds the container width.
  </el-text>
</template>

Override Tag

<template>
  <el-text tag="p">Paragraph text</el-text>
  <el-text tag="div">Div text</el-text>
</template>

Mixed

<template>
  <el-text>
    Normal text with
    <el-text type="primary">primary</el-text>
    and
    <el-text type="danger">danger</el-text>
    inline
  </el-text>
</template>

API Reference

Attributes

Slots

Best Practices

1. Use truncated for single-line ellipsis
2. Use line-clamp for multi-line ellipsis
3. Use tag for semantic HTML