text
更新时间:
文本,文本内容写在标签内容区
子组件
支持<span>
属性
支持通用属性
样式
支持通用样式
名称 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
min-width | <length> |
- | 否 | 指定元素的最小宽度 |
min-height | <length> |
- | 否 | 指定元素的最小高度 |
max-width | <length> |
- | 否 | 指定元素的最大宽度 |
max-height | <length> |
- | 否 | 指定元素的最大高度 |
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组件示例
文本-限制行数
<template>
<div class="wrapper">
<text>文本示例</text>
</div>
</template>
<script>
export default {}
</script>
<style>
.wrapper {
align-items: center;
justify-content: center;
}
text {
height: 200px;
font-size: 100px;
width: 300px;
lines: 2;
}
</style>
复制代码
基础用法
<template>
<div class="wrapper">
<text>文本示例</text>
</div>
</template>
<script>
export default {}
</script>
<style>
.wrapper {
align-items: center;
justify-content: center;
}
</style>
复制代码