结论：:invalid 伪类对纯文本内容完全无效——它仅适用于表单控件元素（如、），且需具备required、minlength等约束属性并实际违反时才触发；普通或即使使用text-overflow: ellipsis，也无法激活:invalid。
text-overflow: ellipsis 无法触发 :invalid 伪类？
直接说结论：:invalid 对纯文本内容完全无效——它只作用于**表单控件元素**（如 <input>、<textarea></textarea>），且仅在元素有 required、minlength、maxlength 等约束属性，并实际违反时才生效。普通 <p></p> 或 <div> 加 <code>text-overflow 样式，无论文本多长，:invalid 都不会匹配。
想让超长文本变红，只能靠 JavaScript 监测长度
CSS 本身没有“文本内容长度校验”能力。真正可行的做法是用 JS 检查字符串长度或 DOM 渲染后宽度，再动态加类。常见场景包括：表格单元格截断预警、表单输入实时提示、卡片标题长度控制。
- 优先用
element.textContent.length判断（简单、快），适用于纯文本且长度规则明确（如“最多 20 字”） - 若需按视觉宽度判断（比如中英文混排、字体不等宽），得用
getBoundingClientRect()或offsetWidth对比容器宽度，但要注意重排开销 - 避免在
scroll或resize中高频调用；对批量元素建议用ResizeObserver替代轮询
const el = document.querySelector('.title');
if (el.textContent.length > 15) {
el.classList.add('warn-truncated');
}
为什么不用 contenteditable + :invalid 做取巧方案？
有人试过把 <div contenteditable="true"> 当输入框用，再加 <code>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 做一次精准判断。
