如何设置浏览器翻译策略？让网页部分内容保留原语言不翻译

当然可以实现这种需求，主流浏览器的内置翻译器都提供了针对特定元素的翻译控制方式，以下是两种最常用且有效的方法：

方法1：使用HTML标准translate属性 #

这是HTML5定义的官方属性，直接给需要保留原语言的元素添加translate="no"，浏览器翻译器会自动跳过该元素的翻译处理。

示例代码：

<!-- 页面整体为英文，翻译时该按钮保留英文 -->
<button translate="no">Submit</button>

方法2：使用notranslate类名 #

部分基于Chromium的浏览器（如Chrome、Edge）支持通过添加notranslate类来阻止元素翻译，这是谷歌翻译普及的非标准但兼容性良好的方案。

示例代码：

<button class="notranslate">Submit</button>

补充说明 #

• 如果需要批量阻止多个元素翻译，可以给它们的父容器添加上述属性或类，大部分浏览器会继承这个翻译规则。
• 对于动态生成的内容，确保在元素渲染完成后为目标元素添加上对应的属性或类，才能生效。
• 兼容性方面：translate属性支持所有现代主流浏览器（Chrome、Firefox、Edge、Safari）；notranslate类在Chromium系浏览器和部分其他浏览器中都能正常工作。

内容的提问来源于stack exchange，提问作者Alex