文本字体 text

文本字体样式,Class控制。适用于任何组件元素。

文字大小

.text-{size} 添加包含尺寸的Class来控制文字大小。

组件库

说明文本，标签文字或关注度低的文字

@weilanwl.com by:color-ui.com

页面辅助信息，次级内容等

专注视觉的小程序组件库

页面默认字号，用于摘要或阅读文本

ColorUI组件库

页面三级标题，首要层级显示内容

您的订单已提交成功！

页面二级标题，用于结果页等单一信息页

价格80.00

页面一级标题,或者用于金额数字等信息

用于较大图标、数字等较大显示

用于超大图标、数字等特大显示

文字颜色

.text-{color} 添加包含颜色的Class来控制文字颜色。

明黄

#fbbd08.text-yellow

橘橙

#f37b1d.text-orange

嫣红

#e54d42.text-red

桃粉

#e03997.text-pink

木槿

#b745cb.text-mauve

姹紫

#905ddf.text-purple

海蓝

#0081ff.text-blue

天青

#1cbbb4.text-cyan

森绿

#3eb93b.text-green

橄榄

#8dc63f.text-olive

玄灰

#8799a3.text-grey

棕褐

#a5673f.text-brown

.text-white

.text-gray-f

.text-gray-e

.text-gray-d

.text-gray-c

.text-gray-b

.text-gray-a

.text-dark-9

.text-dark-8

.text-dark-7

.text-dark-6

.text-dark-5

.text-dark-4

.text-dark-3

.text-dark-2

.text-dark-1

.text-black

mp-cu

文字截断

添加 .text-cut 来控制段落的截断。

发光的翅萤在暮色中翩翩起舞，身后留下夜光残影，但女孩重重地将它们从面前拍走，毫不在意这转瞬即逝的优雅。她双眼垂向地面，踢开一块石头，任其在盘错的树根间跳跃，毫不理会茂密华盖间透过的夕阳。紫夜貂的花瓣缓缓张开，向温润的暮色吐出微光的花粉，但匆匆路过的她却顺手将花茎扭断。

多行截断使用 .text-linecut-{line} 支持2~10行的截断

想实现更多行的截断可以试试在行内样式里写 -webkit-line-clamp: 11;

文本对齐

添加 .text-{ align } 来控制文本的对齐。

我的潜能无穷无尽。休想压住我。

辅助类

《赛博朋克2077》

细文本: text-light

《赛博朋克2077》

超细文本: text-lighter

《赛博朋克2077》

默认粗细文本: text-normal

《赛博朋克2077》

加粗文本: text-bold

《赛博朋克2077》

超粗文本: text-bolder

weilanwl

首字母大写: text-Abc

weilanwl

所有字母大写: text-ABC

weilanwl

删除线: text-del

weilanwl

下划线: text-bottomline

weilanwl

斜体: text-italic

weilanwl

清除所有样式: text-style-none

默认： weilanwl 自动换行： weilanwl

单词自动换行: text-break

默认： ABC to abc 不换行： ABC to abc

不自动换行: text-nowrap

80.00

人民币价格文本: text-price

复制成功

# 文本字体 text

# 文字大小

# 文字颜色

# 文字截断

# 文本对齐

# 辅助类

文本字体 text

文字大小

文字颜色

文字截断

文本对齐

辅助类