translate="no"必须显式写在目标元素上,不继承且不自动生效;<input>和<textarea>的value属性完全不继承;需与lang同时设置才有效,仅设其一将失效。

translate="no" 必须显式写在目标元素上,不继承也不自动生效
浏览器只认字面值 translate="no",且必须直接加在含专有名词的元素上。父级设了 translate="no",子元素虽默认继承,但有硬性例外:<input> 和 <textarea> 的 value 属性完全不继承——哪怕整个页面都加了 translate="no",<input value="v5.2.0"> 仍可能被 Chrome 翻成“五点二零”。
常见错误现象:
- 按钮里写
Upgrade to React 18.3,只给<button>加translate="no",结果 “React 18.3” 还是被译错 - 用 Vue 的
v-html渲染字符串,模板里写了translate="no",但生成的 HTML 里没这个属性,照样翻
正确做法:
- 把不可译内容单独包裹:
<button>Upgrade to <span translate="no">React 18.3</span></button> - 整段不可译(如
npm install -D vite),可直接在<button translate="no">上加 -
<input type="button" value="Run fetch()">→ 必须手动补translate="no"属性,不能靠外层
lang 和 translate 必须同时设置,缺一不可
lang 告诉浏览器“这是什么语言”,translate 告诉翻译工具“别动它”。两者不互换、不替代。只写 <div lang="en">fetch()</div>,Chrome 在中文页中仍可能把它当待译内容;只写 <div translate="no">fetch()</div>,若页面 lang 缺失或错配(比如写成 lang="zh" 而非 lang="zh-CN"),Chrome 可能降级处理,忽略 translate="no"。
立即学习“前端免费学习笔记(深入)”;
关键实操点:
-
<html>标签上必须同时声明:<html lang="zh-CN" translate="no">(JS 后续修改无效,必须初始 HTML 就存在) - 按钮内嵌的专有名词(如
v5.2.0)无需额外加lang,但外层页面语言声明必须准确、带区域码 - 验证是否生效:打开 Chrome DevTools → Elements 面板,检查目标元素是否真实存在
translate="no",且未被 JS 动态移除
哪些内容真正需要加 translate="no"
不是所有英文都要锁。核心判断标准是:一旦被译错,是否导致功能异常或技术歧义。括号、点号、斜杠、下划线、大小写,都是机器可读的关键标识,动了就失效。
必须加 translate="no" 的典型内容:
- 函数/方法名:
fetch()、useState、props.children - API 路径与头字段:
/api/v1/users/:id、X-Auth-Token、user_email - 版本号与规范名:
v5.2.0、React 18.3、TPM2.0 - CSS 类名与测试 ID:
class="btn-primary"、data-testid="submit-btn" - 时间字符串(避免格式变化):
<time datetime="2024-06-15" translate="no">2024/06/15</time>
注意:<script> 和 <style> 内容天生不参与翻译,加 translate="no" 纯属冗余。
动态渲染和第三方组件最容易漏掉 translate="no"
你模板里写了 translate="no",不代表最终 DOM 里还有。JS 动态插入、框架渲染、第三方库输出,都可能绕过你的静态声明。
三类高危场景及应对方式:
- JS 直接操作 DOM:
el.innerHTML = "fetch()"或document.body.appendChild(newEl)→ 插入后必须立刻调用el.setAttribute("translate", "no") - Vue 的
v-html或 React 的dangerouslySetInnerHTML→ 原始字符串里必须已含translate="no",模板语法写的不会透传 - Ant Design、MUI 等组件库输出的按钮或表单项 → 它们通常不自动加该属性,需通过
render、slots或自定义 wrapper 显式注入
真正容易被忽略的是按钮文本来自 CM(内容管理系统)——CMS 导出的 HTML 若未预置 translate="no",前端再怎么补也晚了。



















