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 列表样式在文本范围外