Text文本格式

2024-06-18 23:13:20首发，2个月前更新

文本格式的样式分散在css和原生标签中，用起来多有不便，本框架已经对常用的文本格式写入了css，统一通过css样式类实现原生标签中的文本格式；另外也适当定义了若干非原生标签的、日常行文中常见的文本格式。

前言

默认文本自动继承了body的主色，并没有其他装饰，为了便捷使用特色文本，本框架设计了若干有关文本的样式。

颜色

可使用框架的色系改变文本颜色：_c,_c-prim（同_c）,_c-error,_c-warn,_c-succ,_c-info,_c-issue,_c-text,_c-brief,_c-ignore。通过追加-bd（border简写）、-sd（shadow简写）、-bg（background简写）等后缀使用相关颜色。

如果需要使用更复杂的颜色，请参考颜色API。

装饰线

text-decoration和text-emphasis属性可以设置文本的装饰线，为了方便使用，本框架做了改进，通过_t-*样式类来设置文本的装饰线。

• _t-wv:设置文本底部波浪线（wv=wave缩写），与使用cite标签效果一致；
• _t-lt:设置文本顶部横线（lt=line-top缩写）；
• _t-lc:设置文本中间删除线（lc=line-center缩写）；
• _t-lb:设置文本底部横线（lb=line-bottom缩写）；
• _t-em:设置文本顶部强调小点（em=emphasize缩写），与使用em标签效果一致；

大小写

中文没有大小写要求，但是对于拼音或英文需要做大小写区分，甚至特别需要头字母大写。本框架可通过样式类设置大小写。

• _t-upc:设置文本大写（upc=uppercase缩写）；
• _t-lwc:设置文本小写（lwc=lowercase缩写）；
• _t-cap:设置文本单词头字母大写（cap=capital缩写）；

居中漫开

在使用正文中一般不需要设置字符间距，但是在某些特殊情况下（比如板块标题），比如需要强调装饰作用的时候可能需要设置字符间距。

通过对文本使用_t-diffuse样式类即可实现漫开效果；如果需要自定义间距可使用间隙后缀xxs~xxl。

• _t-diffuse-xxs：间距0.6em
• _t-diffuse-xs：间距0.8em
• _t-diffuse-sm：间距1em
• _t-diffuse-md：间距1.4em，与_t-diffuse效果一致
• _t-diffuse-lg：间距1.8em
• _t-diffuse-xl：间距2.4em
• _t-diffuse-xxl：间距2.8em

注意，使用_t-diffuse[-*]样式后，文本将自动居中分散排列。

扩大间隙

如果需要单纯的扩大单词之间（不是字符）空格的间隙，可使用_t-blank[-*]样式类。

• _t-blank-xxs：间距0.6em
• _t-blank-xs：间距0.8em
• _t-blank-sm：间距1em
• _t-blank-md：间距1.4em，与_t-blank效果一致
• _t-blank-lg：间距1.8em
• _t-blank-xl：间距2.4em
• _t-blank-xxl：间距2.8em

装饰标签

本框架改造了部分原生标签，包括em、ruby、mark、cite、blockquote、address、time等，可以与其他未改造的原生标签混合使用。

内换行

如果需要对某行文字内部换行，可使用_t-br样式类。官方公文经常使用这样的文本格式。

在两行情况下完美显示，但是3行或更多行的时候，中间行的右侧不能对齐，目前无解。

不可划选

使用unselectable属性表示文本段落不可划选。

不可触发

使用disabled属性表示文本段落不可点击或触发（会穿透自身而触发下层的元素），但是未禁止键盘事件。

完全禁用

使用inert属性表示文本段落不可点击或触发（会穿透自身而触发下层的元素），同时禁止任何鼠标键盘事件，让元素表现为只显示的静态元素。inert属性是disabled属性的加强。

该属性可适用于任何元素，但是禁用表单元素还是建议使用disabled属性。

滚轮不联动

在一个元素中使用滚轮事件通常会触发整个页面的滚动，通过对文本设置dedicated属性可取消联动滚动，让滚轮事件只作用在当前元素。