文字 ​

<template>
  <el-text class="mx-1">默认文本</el-text>
  <el-text class="mx-1" type="primary">主说明</el-text>
  <el-text class="mx-1" type="success">成功提示</el-text>
  <el-text class="mx-1" type="info">信息提示</el-text>
  <el-text class="mx-1" type="warning">提醒内容</el-text>
  <el-text class="mx-1" type="danger">风险提示</el-text>
</template>

<template>
  <el-text class="mx-1" size="large">大号文本</el-text>
  <el-text class="mx-1">默认文本</el-text>
  <el-text class="mx-1" size="small">小号说明</el-text>
</template>

<template>
  <div class="text-truncated-demo">
    <el-text class="text-truncated-demo__item" truncated>
      当前标题过长时，会在一行内自动省略。
    </el-text>
    <el-row class="text-truncated-demo__item">
      <el-text truncated>父容器宽度收窄后，文本也会自动省略。</el-text>
    </el-row>
    <el-text line-clamp="2">
      多行文本可以通过
      <code>line-clamp</code> 限制显示行数，适合卡片摘要、订单说明或活动介绍。
    </el-text>
  </div>
</template>

<style scoped>
.text-truncated-demo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.text-truncated-demo__item {
  max-width: 9.375rem;
}
</style>

<template>
  <el-space>
    <el-text>默认使用 span</el-text>
    <el-text tag="p">这里是一段段落文本。</el-text>
    <el-text tag="b">加粗强调</el-text>
    <el-text tag="i">斜体说明</el-text>
    <el-text>
      这里带有
      <el-text tag="sub" size="small">下标</el-text>
    </el-text>
    <el-text>
      这里带有
      <el-text tag="sup" size="small">上标</el-text>
    </el-text>
    <el-text tag="ins">插入内容</el-text>
    <el-text tag="del">删除内容</el-text>
    <el-text tag="mark">高亮标记</el-text>
  </el-space>
</template>

<template>
  <el-space>
    <el-text>
      <el-icon>
        <ElementPlus />
      </el-icon>
      组件库
    </el-text>
    <el-row>
      <el-text>评分</el-text>
      <el-rate class="ml-1" />
    </el-row>
    <el-text>
      文本也可以组合图标、
      <el-icon>
        <Bell />
      </el-icon>
      按钮等组件
      <el-button>立即查看</el-button>
    </el-text>
  </el-space>
</template>

<script lang="ts" setup>
import Bell from '~icons/ep/bell'
import ElementPlus from '~icons/ep/element-plus'
</script>