CSSTextLib

一个功能强大的CSS文本样式库，提供丰富的文本样式类，帮助开发者快速实现各种文本效果。包含三个迭代版本，每个版本都在前一个基础上增加了新特性和改进。

1.0 - 基础版本
2.0 - 增强版本
3.0 - 完整版本

版本特性对比

CSSTextLib 历经三个版本迭代，功能逐步完善，以下是各版本核心特性对比：

功能分类 v1.0 v2.0 v3.0
基础样式 ✅ 颜色/字号/基础装饰 ✅ 完整支持（SCSS 重构） ✅ 完整支持 + 扩展
文本透明度 ✅ 0-100 档位 ✅ 0-100 档位 ✅ 0-100 档位
文本间距 ✅ 字母/单词/行高 ✅ 字母/单词/行高 ✅ 字母/单词/行高 + 扩展
响应式控制 ❌ 不支持 ✅ xs/sm/md/lg 断点 ✅ xs/sm/md/lg 断点
暗色模式 ❌ 不支持 ✅ 基础系统适配 ✅ 扩展适配 + 样式优化
打印优化 ❌ 不支持 ✅ 基础优化 ✅ 完整优化（动画/省略号/颜色）
文本动画 ❌ 不支持 ✅ 淡入动画 ✅ 淡入/淡出/缩放/闪烁
字重系统 ❌ 仅 bold ❌ 仅 bold ✅ 100-900 完整字重
文本阴影 ❌ 仅基础阴影 ❌ 仅基础阴影 ✅ 多尺寸/发光阴影预设
文本溢出 ✅ 仅单行省略 ✅ 仅单行省略 ✅ 单行/2行/3行省略 + 裁剪
交互效果 ❌ 不支持 ❌ 不支持 ✅ Hover 颜色/透明度/字重
光标/选择控制 ❌ 不支持 ❌ 不支持 ✅ 光标样式/文本选择控制
装饰线样式 ✅ 基础下划线/删除线 ✅ 基础下划线/删除线 ✅ 虚线/点线/双线/波浪线

版本选择建议：

  • 新项目推荐使用 v3.0，功能最完整，体验最佳
  • 如需兼容旧项目可选择 v2.0
  • 仅需基础文本样式可选择 v1.0（体积最小）

版本 1.0

基础文本样式

CSSTextLib 1.0 提供了基础的文本样式类，包括颜色、字体大小、字重、文本装饰等基本功能。

导入方式1 (Github Raw)

<link rel="stylesheet" href="https://raw.githubusercontent.com/EndlessPixel/CSSTextLib/refs/heads/main/version/1.0/text.css">

导入方式2 (JsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/1.0/text.css">

使用示例

这是一个红色、粗体、大号文本

这是一个蓝色、下划线、中号文本

这是一个绿色、斜体、黄色高亮文本

<p class="text-color-red text-bold text-size-large">这是一个红色、粗体、大号文本</p> <p class="text-color-blue text-underline text-size-medium">这是一个蓝色、下划线、中号文本</p> <p class="text-color-green text-italic text-highlight-yellow">这是一个绿色、斜体、黄色高亮文本</p>

主要功能

文本颜色
提供多种颜色类，如 .text-color-red, .text-color-blue 等
字体大小
多种尺寸预设，从 .text-size-small 到 .text-size-xxxlarge
文本装饰
粗体、斜体、下划线、删除线等样式
文本对齐
左对齐、居中对齐、右对齐、两端对齐
高亮效果
多种高亮背景颜色，如 .text-highlight-yellow
字体族
衬线体、无衬线体、等宽字体等

版本 2.0

SCSS增强版

CSSTextLib 2.0 使用SCSS重构，增加了响应式设计、暗色模式支持、动画效果和打印优化等高级功能。

导入方式1 (Github Raw)

<link rel="stylesheet" href="https://raw.githubusercontent.com/EndlessPixel/CSSTextLib/refs/heads/main/version/2.0/csstextlib.css">

或使用压缩版本：

<link rel="stylesheet" href="https://raw.githubusercontent.com/EndlessPixel/CSSTextLib/refs/heads/main/version/2.0/csstextlib.min.css">

导入方式2 (JsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/2.0/csstextlib.css">

或使用压缩版本：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/2.0/csstextlib.min.css">

新增功能示例

这是一个响应式文本（调整窗口大小查看效果）

这是一个淡入动画文本

这是一个带阴影的文本

这个元素在小于768px的屏幕上会隐藏（调整窗口大小查看效果）
<!-- 响应式文本 --> <p class="text-responsive text-color-purple">这是一个响应式文本</p> <!-- 动画文本 --> <p class="text-animate-fade text-color-orange">这是一个淡入动画文本</p> <!-- 带阴影文本 --> <p class="text-shadow text-color-deep-blue">这是一个带阴影的文本</p> <!-- 响应式隐藏 --> <div class="text-hide-sm"> 这个元素在小于768px的屏幕上会隐藏 lt;/div>

新增特性

响应式设计
响应式文本大小和显示/隐藏类
暗色模式
自动适配系统暗色模式
动画效果
淡入动画 .text-animate-fade
打印优化
优化打印时的文本显示效果
SCSS变量
使用SCSS变量方便自定义
间距控制
字母间距、单词间距控制类

版本 3.0

完整功能版

CSSTextLib 3.0 是最完整的版本，增加了多档位字重、多种文本阴影、多行文本省略、光标样式、交互效果等大量新功能。

导入方式1 (Github Raw)

<link rel="stylesheet" href="https://raw.githubusercontent.com/EndlessPixel/CSSTextLib/refs/heads/main/version/3.0/csstextlib.css">

或使用压缩版本：

<link rel="stylesheet" href="https://raw.githubusercontent.com/EndlessPixel/CSSTextLib/refs/heads/main/version/3.0/csstextlib.min.css">

导入方式2 (JsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/3.0/csstextlib.css">

或使用压缩版本：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EndlessPixel/CSSTextLib@main/version/3.0/csstextlib.min.css">

新增功能示例

超粗体字重示例

中等阴影文本

这是一个多行文本省略示例，当文本超过两行时会显示省略号。这是一个多行文本省略示例，当文本超过两行时会显示省略号。

鼠标悬停时变粗体（尝试悬停）

波浪下划线文本

<!-- 多档位字重 --> <p class="text-weight-black text-color-deep-red">超粗体字重示例</p> <!-- 多种阴影 --> <p class="text-shadow-medium text-color-purple">中等阴影文本</p> <!-- 多行省略 --> <p class="text-overflow-ellipsis-2" style="width: 300px;"> 这是一个多行文本省略示例... </p> <!-- 悬停效果 --> <p class="text-cursor-pointer text-color-blue text-hover-bold"> 鼠标悬停时变粗体 </p> <!-- 装饰线样式 --> <p class="text-decoration-underline-wavy text-color-green"> 波浪下划线文本 </p>

新增特性

多档位字重
从 thin(100) 到 black(900) 的9种字重
文本阴影预设
small, medium, large 及发光效果
多行文本省略
2行、3行文本省略显示
光标样式
pointer, text, not-allowed 等
交互效果
悬停变色、变粗、透明度变化
装饰线样式
虚线、点线、双线、波浪线
文本选择控制
控制用户能否选择文本
垂直对齐增强
baseline, super, sub 等对齐方式
动画扩展
淡出、缩放、闪烁动画
自定义字体
预设了常用中英文字体族

交互演示

点击下方按钮，实时查看 CSSTextLib 3.0 的各种文本效果

这是一个交互演示文本，点击上方按钮查看不同效果。

当前应用类：无