text

更新时间:

文本,文本内容写在标签内容区

子组件

支持<span>

属性

支持通用属性

样式

支持通用样式

名称 类型 默认值 必填 描述
min-width <length> | <percentage> - 否 指定元素的最小宽度
min-height <length> | <percentage> - 否 指定元素的最小高度
max-width <length> | <percentage> - 否 指定元素的最大宽度
max-height <length> | <percentage> - 否 指定元素的最大高度
lines <number> -1 否 文本行数,-1 代表不限定行数
color <color> #757575 否 文本颜色
font-size <length> 30px 否 文本尺寸
font-weight normal | bold | lighter | border | normal 否 当前平台仅支持 normal 与 bold 两种效果
text-decoration underline | line-through | none none 否 用于设置文本的修饰线外观
text-align left | center | right left 否 文本的水平对齐方式。
line-height <length> - 否 行高设置
text-overflow clip | ellipsis clip 否 在设置了行数的情况下生效

事件

支持通用事件

text组件

文本,文本内容写在标签内容区
文本-限制行数
<script>
export default {}
</script>

<template>
  <div class="wrapper flex items-center justify-center bg-white">
    <text class="h-[200px] text-[100px] w-[300px]" style="lines: 2">文本示例</text>
  </div>
</template>

<style>
@tailwind utilities;
</style>
复制代码
图标图标
图标图标
图标图标
基础用法
<script>
export default {}
</script>

<template>
  <div class="flex items-center justify-center bg-white">
    <text>文本示例</text>
  </div>
</template>

<style>
@tailwind utilities;
</style>
复制代码
图标图标
图标图标
图标图标
上一篇
image
下一篇
span