本文介绍一种纯 CSS 技巧，利用文本宽度差异配合 background-clip: text 和渐变遮罩，为不同文字内容（如“In Stock”和“Out of Stock”）自动应用不同颜色，完全不依赖 JavaScript 或 HTML 类名变更。
本文介绍一种纯 css 技巧，利用文本宽度差异配合 `background-clip: text` 和渐变遮罩，为不同文字内容（如“in stock”和“out of stock”）自动应用不同颜色，完全不依赖 javascript 或 html 类名变更。
在现代前端开发中，我们常希望根据数据内容动态调整视觉样式。但标准 CSS 无法直接读取或判断 <span> 内部文本内容（例如 :contains() 伪类未被主流浏览器支持，且不属于 CSS 规范）。因此，传统思路（如 .status-instock { color: green; }）需预先为每个状态添加语义化 class——这在动态渲染的数据表中往往不可行。
所幸，存在一种精巧的“宽度感知” CSS Hack，它不检查文字本身，而是利用两个字符串固有的渲染宽度差异作为隐式判断条件：
- "In Stock"（8 字符，含空格）通常比 "Out of Stock"（12 字符）更短；
- 通过设置一个临界宽度（如 90px），结合 calc() 与双背景渐变，可实现「宽度 ≤ 临界值 → 显示绿色；否则显示红色」的效果。
以下是完整、可直接复用的 CSS 解决方案：
/* 必须设为 inline-block 或 block 才能精确控制宽度 */
.fd-datatable .row [role="gridcell"] span {
display: inline-block;
font-size: 14px; /* 建议固定字号，确保宽度稳定 */
line-height: 1.4;
color: transparent; /* 隐藏原始文字色，仅靠背景色呈现 */
background:
linear-gradient(to right, green 0 0) 0 / calc(90px - 100%) 100%,
linear-gradient(to right, red 0 0) 0 / calc(100% - 90px) 100%;
-webkit-background-clip: text;
background-clip: text;
}✅ 关键原理说明：
立即学习“Java免费学习笔记（深入）”；
- calc(90px - 100%)：当元素宽度 < 90px 时结果为正，绿色渐变可见；≥ 90px 时为负或零，绿色区域消失；
- calc(100% - 90px)：反之，仅当宽度 > 90px 时红色渐变生效；
- background-clip: text 将渐变裁剪至文字轮廓内，实现“文字着色”效果。
⚠️ 重要注意事项：
- 必须校准临界宽度：90px 是示例值，实际需根据字体族（font-family）、字号（font-size）、字重（font-weight）及字符间距（letter-spacing）在目标环境中实测调整。推荐使用浏览器开发者工具临时修改并观察效果；
- 避免换行干扰：确保 white-space: nowrap（默认 inline 元素已满足），防止多行渲染破坏宽度逻辑；
- 兼容性提示：background-clip: text 在 Safari 中需 -webkit- 前缀，Chrome/Firefox/Edge 103+ 原生支持；
- 语义与可访问性：文字内容保持原样，屏幕阅读器仍可正常朗读，无障碍友好。
? 进阶建议：
若表格列宽固定或字体高度统一，还可结合 ch 单位（如 calc(12ch - 100%)）提升响应式鲁棒性；对于更复杂的状态（如 “Limited”, “Discontinued”），可通过叠加多层渐变或结合 text-shadow 实现三色逻辑，但需谨慎测试层级与性能。
该方法本质是将“内容识别”转化为“几何特征识别”，虽属 Hack，却在零 JS、零 DOM 操作前提下，以声明式 CSS 实现了动态样式映射——是纯 CSS 工程化思维的一次优雅实践。
