注册 登录

清河洛

tailwind中的文本和列表

qingheluo2023-12-08清河洛579
字体名称: font-[family]字体大小: text-[size]字体平滑antialiased :灰度抗锯齿 subpixel-antialiased :子像素抗锯齿斜体: italic not-italic字体粗细:font-[weight] :weight为一个1-1000的数字 以下预设值从前到后依次加粗(由100增至900) font-thin font-extralight font-light font-normal font-medium font-semibold font-bold fon...

字体名称: font-[family]

字体大小: text-[size]

字体平滑

antialiased            :灰度抗锯齿
subpixel-antialiased   :子像素抗锯齿

斜体: italic not-italic

字体粗细

font-[weight]  :weight为一个1-1000的数字

以下预设值从前到后依次加粗(由100增至900)
font-thin       font-extralight
font-light      font-normal
font-medium     font-semibold
font-bold       font-extrabold
font-black

字母间距: tracking-[size]

设置行高: leading-[size]

文本选择

select-none     禁用选择文本
select-text     允许选择文本
select-all      元素内任意位置单击即可选中所有内容
select-auto     使用默认值

文本对齐

text-* :可用的值
    left    right
    center  justify
    start   end

文本颜色: text-[color]/n

划线装饰

划线位置:
    no-underline    :取消掉划线装饰
    underline       :下划线
    overline        :上划线
    line-through    :删除线

划线颜色: decoration-[color]/n

划线样式:
    decoration-solid    decoration-double
    decoration-dotted   decoration-dashed
    decoration-wavy

划线粗细: decoration-[width]

下划线偏移:underline-offset-[width]

大小写转换

uppercase       全部转为大写
lowercase       全部转为小写
capitalize      每个单词首字母大写
normal-case     无转换

文本溢出

truncate        :禁止换行,截断后添加省略号
text-ellipsis   :截断后添加省略号
text-clip       :截断后不添加省略号

显示行数

line-clamp-[n]  :内容在指定的n行之后不显示,最后显示三个点
line-clamp-none :取消显示行数限制

首行文本缩进: indent-[width]

垂直对齐

自定义: indent-[width]

align-baseline      align-top
align-middle        align-bottom
align-text-top      align-text-bottom
align-sub           align-super

空白处理

whitespace-normal           默认,空白符压缩,文本自动换行
whitespace-nowrap           空白符压缩,文本不换行
whitespace-pre              空白符保留,遇到换行符才换行
whitespace-pre-line         空白符压缩,文本会在排满或遇换行符换行
whitespace-pre-wrap         空白符保留,文本会在排满或遇换行符换行

换行分词

break-normal    当前行无法容纳空格之后的下一个单词换行,保障单词的完整性
break-words     优先保障单词完成性,无法保障时允许对单词进行换行拆分
break-all       无视单词完整性进行换行

列表样式

自定义: list-[style]
    none:没有标记       disc:实心圆
    circle:空心圆       square:实心方块
    decimal:阿拉伯数字  lower-roman:小写罗马数字
    upper-roman:大写罗马数字
    lower-alpha:小写英文字母
    upper-roman:大写英文字母

list-none       无样式
list-disc       原点样式
list-decimal    数字样式

图片列表样式 :list-image-[url()]

列表样式位置

list-inside    列表样式在文本范围内
list-outside   列表样式在文本范围外


网址导航