---
title: 文本
date: 2023-05-28 14:05:38
permalink: /pages/basics/text
article: false
---

## 文字大小
```css
.text-xsl  文字大小 60px 用于图标、数字等特大显示
.text-sl   文字大小 40px 用于图标、数字等较大显示
.text-xxl  文字大小 22px 用于金额数字等信息
.text-xl   文字大小 18px 页面大标题，用于结果页等单一信息页
.text-lg   文字大小 16px 页面小标题，首要层级显示内容
.text-df   文字大小 14px 页面默认字号，用于摘要或阅读文本
.text-sm   文字大小 12px 页面辅助信息，次级内容等
.text-xs   文字大小 10px 说明文本，标签文字等关注度低的文字
```

## 文字颜色
```css
.text-red  /* 嫣红 #e54d42 */
.text-orange  /* 桔橙 #f37b1d */
.text-yellow  /* 明黄 #fbbd08 */
.text-olive  /* 橄榄 #8dc63f */
.text-green  /* 森绿 #39b54a */
.text-cyan  /* 天青 #1cbbb4 */
.text-blue  /* 海蓝 #0081ff */
.text-purple  /* 姹紫 #6739b6 */
.text-mauve  /* 木槿 #9c26b0 */
.text-pink  /* 桃粉 #e03997 */
.text-brown  /* 棕褐 #a5673f */
.text-grey  /* 玄灰 #8799a3 */
.text-gray  /* 草灰 #aaaaaa */
.text-black  /* 墨黑 #333333 */
.text-white  /* 雅白 #ffffff */
```

## 文字阴影
```css
.text-shadow  {
     /* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */
    text-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2);
}
```

## 文字截断
> css 代码
```css
.text-cut  定义文字容器宽度，超出截断
```

> 演示代码
```vue
<template>
    <view class="padding bg-white">
        <view class="text-cut padding bg-grey radius" style="width:220px">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    </view>
</template>
```

## 文字对齐
> css 代码
```css
.text-left  左对齐
.text-center  居中对齐
.text-right  右对齐
```

> 演示代码
```vue
<template>
    <view class="padding bg-white">
        <view class="text-left padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
        <view class="text-center padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
        <view class="text-right padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    </view>
</template>
```

## 特殊文字
> css 代码
```css
.text-price  价格文本，利用伪元素添加"¥"符号
.text-Abc  英文单词首字母大写
.text-ABC  全部字母大写
.text-abc  全部字母小写
```

> 演示代码
```vue
<template>
    <view class="padding text-center">
        <view class="padding-lr bg-white">
            <view class="solid-bottom padding">
                <text class="text-price">80.00</text>
            </view>
            <view class="padding">价格文本，利用伪元素添加"¥"符号</view>
        </view>
        <view class="padding-lr bg-white margin-top">
            <view class="solid-bottom padding">
                <text class="text-Abc">color Ui</text>
            </view>
            <view class="padding">英文单词首字母大写</view>
        </view>
        <view class="padding-lr bg-white margin-top">
            <view class="solid-bottom padding">
                <text class="text-ABC">color Ui</text>
            </view>
            <view class="padding">全部字母大写</view>
        </view>
        <view class="padding-lr bg-white margin-top">
            <view class="solid-bottom padding">
                <text class="text-abc">color Ui</text>
            </view>
            <view class="padding">全部字母小写</view>
        </view>
    </view>
</template>
```