text-emphasis 不会自动匹配关键词，因其仅为纯样式属性，不解析语义、不查找子串、不触发 DOM 检索；必须手动用 <span> 包裹关键词或通过 JS 动态插入标记才能生效。
text-emphasis 不能直接用于 <table> 或 <td> 元素内部的“关键字”自动识别和标记——它只作用于**内联文本内容**，且需明确指定作用范围。想给表格中某些关键词加着重号（比如“重要”“待审核”“已过期”），得手动包裹或用 JS 动态处理，而不是靠 CSS 自动扫描匹配。
为什么 text-emphasis 不会自动匹配关键词
text-emphasis 是纯样式属性，类似 text-decoration，它不解析语义、不查找子串、不触发 DOM 检索。浏览器不会因为某个 <td> 里写了“紧急”，就自动给这个词加 ● ——你必须先把“紧急”单独用 <span> 包起来，再对这个 <span> 应用样式。
-
text-emphasis只对设置了display: inline（或默认内联）的元素生效，<td>默认是table-cell，需显式改display才可能起作用，但不推荐 - 它不支持正则或字符串匹配，也没有
data-keyword这类绑定机制 - 若整格文字都强调（如全格标红点），可用
text-emphasis直接设在<td>上；但只强调其中几个字，就必须拆分 DOM
手动包裹关键词是最稳的写法
适用于静态表格、关键词固定、数量不多的场景。把要强调的词用 <span class="emph-keyword"> 包住，再配 CSS：
<td>状态：<span class="emph-keyword">待审核</span></td>
.emph-keyword { text-emphasis: triangle #d32f2f; }
立即学习“前端免费学习笔记（深入）”；
- 避免用
<em>或<strong>替代 —— 它们语义不同，且默认样式可能干扰text-emphasis渲染（尤其在部分旧浏览器中） - 若关键词含空格或标点（如“高优先级！”），确保
<span>精确包裹目标字符，不要多包空白符，否则强调符号位置会偏移 -
text-emphasis在 Firefox 中支持最早最完整；Chrome 107+、Safari 16.4+ 也支持，但 Safari 对string值（如"★"）渲染略宽，建议优先用triangle或dot
JS 动态标记关键词（适合数据驱动表格）
当表格由 JS 渲染（如 Vue/React 表格组件或 fetch 后插入），可遍历单元格文本，用正则插入 <span>：
function highlightKeywords(cell, keywords = ['紧急', '驳回', '超时']) {
const text = cell.textContent;
let html = text;
keywords.forEach(kw => {
const escaped = kw.replace(/[.*+?^${}()|[]\]/g, '\$&');
html = html.replace(new RegExp(`(${escaped})`, 'g'), '<span class="emph-keyword">$1</span>');
});
cell.innerHTML = html;
}
// 调用示例：highlightKeywords(document.querySelector('td'));
- 注意：
cell.innerHTML = ...会销毁原有子元素（如图标、链接），仅适用于纯文本<td> - 若单元格含 HTML（如带
<a>的操作列），应先 cloneNode(true) 遍历文本节点，再替换，避免破坏结构 - 性能上，每格都跑正则影响不大；但若表格上千行，建议节流或仅对 visible rows 处理
容易被忽略的兼容与渲染细节
text-emphasis 的实际表现比看起来更“娇气”：
- 它受
line-height和font-size影响明显：字号变大时，dot可能糊成一团；line-height过小会导致符号贴着文字上沿甚至被裁剪 - 中文环境下，
text-emphasis-style: sesame渲染效果不稳定，部分字体下显示为方块或空白，triangle和circle更可靠 - 若表格用了
white-space: nowrap或text-overflow: ellipsis，text-emphasis符号可能被截断，需配合overflow: visible和足够 padding - 无障碍方面：
text-emphasis不被屏幕阅读器朗读，也不产生语义；真要传达重要性，仍需搭配aria-label或role="alert"
