CSS文本溢出警告色设置技巧

const el = document.querySelector('.title');
if (el.textContent.length > 15) {
  el.classList.add('warn-truncated');
}

当输入框用，再加 maxlength 和 :invalid。这看似可行，但问题一堆：

• contenteditable 元素默认不支持 maxlength 属性（部分浏览器忽略，无标准行为）
• 即使强行绑定，:invalid 触发不稳定，且会干扰用户编辑体验（比如光标跳动、样式闪烁）
• 移动端兼容性差，iOS Safari 对 contenteditable 的 :invalid 支持几乎为零
• 语义错误：非表单场景滥用表单校验逻辑，无障碍（a11y）属性难以正确设置

真要纯 CSS 实现“视觉警告”，只有 overflow: hidden + text-shadow 这条窄路

如果坚决不用 JS，唯一能勉强模拟的，是利用 text-overflow: ellipsis 结合 text-shadow 在省略号上做颜色区分——但这不是“警告超长”，而是“固定样式提醒有截断”。

• 必须配合 white-space: nowrap 和 overflow: hidden 才生效
• text-shadow 只能作用于省略号本身（即最后三个点），无法高亮整行或标记“超标”状态
• 不响应内容变化：文本删减后，省略号和阴影仍存在，无法自动撤回

.truncating {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 5px red;
}

CSS 里没有“文本内容长度条件判断”这个概念。所有试图绕过 JS 用伪类实现的方案，最终都会卡在语义错位、浏览器支持断裂或行为不可控上。最稳妥的路径，就是老老实实监听内容变化，用 JS 做一次精准判断。

今天关于《CSS文本溢出警告色设置技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！