• 组件
  • 布局与其它

Text 文本色彩

通过不同色彩进行信息层级区分,易于信息阅读。

规则

  • 加上相应类,可以得到相应的简单颜色。注意优先级哦。

代码演示

文本

正文颜色默认字体为16px

辅助内容色

次级辅助内容色

占位提示内容色

高亮提示内容色

警告提示色

成功提示色

重点提示内容色

文本错误哑光提示色

链接

组合字体,常用于钱款: ¥ 35.30

划线

测试文本,加txt-nowrap单行截断可以超出长度截断哦~~~~~~~


文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断文本超出两行溢出截断~~~~~~~


文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断文本超出三行溢出截断~~~~~~~


文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断文本超出四行溢出截断~~~~~~~

文本样式示例
<p>正文颜色</p>
<p class="txt-info">辅助内容色~</p>
<p class="txt-insign">次级辅助内容色~</p>
<p class="txt-weak">占位提示内容色</p>
<p class="txt-highlight">高亮提示内容色~</p>
<p class="txt-warning">警告提示色</p>
<p class="txt-success">成功提示色</p>
<p class="txt-prompt">重点提示内容色~</p>
<p class="txt-error">文本错误哑光提示色~</p>
<p class="txt-arrowlink">箭头链接。。</p>
<p class="txt-nowrap">测试文本,加txt-nowrap可以超出长度截断哦~~~~~~~</p>
<a href="">链接</a>
<p class="txt-highlight">组合字体,常用于钱款: <span class="txt-size-sm">¥ </span>35.<span class="txt-size-sm">30</span></p>
<p class="txt-line-wrapper">
	<span class="txt-line">医院列表</span>
</p>
文本溢出

仅支持纯文本

<p class="txt-nowrap">单行截断</p>
<p class="txt-overflow-two">文本超出两行溢出截断</p>
<p class="txt-overflow-three">文本超出三行溢出截断</p>
<p class="txt-overflow-four">文本超出四行溢出截断</p>