基础使用 ​

如要使用图鸟内置的文本样式，使用tn-text类即可

设置字体大小 ​

图鸟默认的字体大小是14px，可以通过var(--tn-font-size)来获取字体大小

图鸟样式中内置了xs、sm、lg、xl、2xl、3xl、4xl的字体尺寸

设置对其方式 ​

图鸟内置了left、center、right三种对其方式

tn-text-left

tn-text-center

tn-text-right

设置段落超过行数隐藏 ​

如果需要让段落超过行数隐藏，对应的容器必须设置宽度，否则无法生效

图鸟内置了 1-5 行的超过行数隐藏，通过tn-text-ellipsis-1、tn-text-ellipsis-2、tn-text-ellipsis-3、tn-text-ellipsis-4、tn-text-ellipsis-5来设置

tn-text-ellipsis-1

tn-text-ellipsis-2

tn-text-ellipsis-3

tn-text-ellipsis-4

tn-text-ellipsis-5

字体其他样式 ​

tn-text-bold ​

加粗字体

tn-text-uppercase ​

将英文字母转换为大写

tn-text-lowercase ​

将英文字母转换为小写

tn-text-capitalize ​

将英文单词首字母转换为大写

tn-text-transparent ​

设置文字的颜色根据背景来自动调整

设置文本颜色 ​

可以使用图鸟内置的颜色值来修改边框颜色。具体颜色可选值可以参考 颜色。
在类型颜色值和内置颜色值后加上 _text 即可。

<div class="tn-type-primary_text">TuniaoUI vue3</div>
<div class="tn-red_text">TuniaoUI vue3</div>
<div class="tn-red-light_text">TuniaoUI vue3</div>
...

<div class="tn-type-primary_text">TuniaoUI vue3</div>
<div class="tn-red_text">TuniaoUI vue3</div>
<div class="tn-red-light_text">TuniaoUI vue3</div>
...