讲师中心 微信公众号
AI工具推荐 视频效率加速

Sublime如何快速地给一段文本添加HTML标签? (Wrap with Abbreviation)

大墨小哥_9673

大墨小哥_9673

发布时间:2026-01-12 11:37:02

|

351人浏览过

|

来源于php中文网

原创

Wrap with Abbreviation 功能位于 Emmet 插件中,需先通过 Package Control 安装并启用 Emmet,确保文件语法为 HTML 等支持格式,再用 Ctrl+Shift+G(Win/Linux)或 Cmd+Shift+G(macOS)调用,输入 CSS 选择器式缩写即可包裹文本。

sublime如何快速地给一段文本添加html标签? (wrap with abbreviation)

Wrap with Abbreviation 功能在哪找?

这个功能藏在 Emmet 插件里,不是 Sublime 原生功能。如果你刚装好 Sublime,大概率还没启用它——得先确认 Emmet 已安装且生效。

检查方式:选中一段文本,按 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS),输入 Wrap with Abbreviation,看是否能搜到。搜不到?说明 Emmet 没装或没启动成功。

  • 推荐用 Package Control 安装:Ctrl+Shift+P → 输入 Install Package → 搜 Emmet → 选中安装
  • 装完重启 Sublime,或手动执行一次 Emmet: Enable Languages,确保 HTML/CSS/JS 等语法被识别
  • 如果仍不响应,检查当前文件右下角的语法模式是不是 HTML(不是 Plain Text 或 Text)

怎么用 Wrap with Abbreviation 给文本加标签?

选中文本后,快捷键是 Ctrl+Shift+G(Windows/Linux)或 Cmd+Shift+G(macOS)。弹出输入框,直接敲缩写即可,比如:

div.my-class#my-id

回车后,选中的文本就会被包裹成:

立即学习“前端免费学习笔记(深入)”;

<div class="my-class" id="my-id">[你的文本]</div>

常见缩写习惯:

HTML Extract
HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容,将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载
  • p → <p>...</p>
  • span.red → <span class="red">...</span>
  • a[href="https://example.com"] → <a href="https://example.com">...</a>
  • ul>li*3 → 会生成三层嵌套结构(但注意:这适用于空行或光标位置,对已选文本只包裹最外层)

为什么有时按了 Ctrl+Shift+G 没反应?

这不是插件坏了,多数是触发条件没满足:

  • 当前视图不是支持 Emmet 的语法(如文件后缀是 .txt,或右下角显示 Plain Text)→ 手动点右下角切换为 HTML
  • 选区包含换行符且跨多行(尤其首尾有空格或空行)→ Emmet 对多行文本的包裹行为不稳定,建议先用 Ctrl+Shift+L 拆行再逐行处理,或改用 Ctrl+Shift+A(Wrap with Tag,Sublime 原生功能,不依赖 Emmet)
  • 快捷键被其他插件占用 → 在 Preferences → Key Bindings 里搜 wrap_with_abbreviation,确认绑定存在且无冲突
  • Emmet 配置禁用了该命令 → 检查 Preferences → Package Settings → Emmet → Settings 中是否有 "disabled_commands" 包含 wrap_with_abbreviation

Wrap with Abbreviation 和原生 Wrap with Tag 有什么区别?

根本差异在于:前者走 Emmet 引擎,支持 CSS 选择器式缩写;后者只是简单套一层标签,不解析 class/id 属性。

比如选中 hello,用原生 Ctrl+Shift+A 输入 div.class1#id1,结果是:

<div.class1#id1>hello</div.class1#id1>

而 Ctrl+Shift+G 输入同样内容,得到的是标准 HTML:

<div class="class1" id="id1">hello</div>

所以——要加属性,必须用 Wrap with Abbreviation;只要简单套个 <p> 或 <span>,原生命令更快、更轻量。

真正容易被忽略的是:Emmet 的缩写解析严格依赖当前语法上下文。比如在 JSX 文件里,默认不启用 HTML 缩写,得手动在 Emmet → Settings 里把 jsx 加进 variables 或 extensions 列表里,否则 Ctrl+Shift+G 就是静音状态。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

相关专题

更多
class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

3216

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

286

2025.12.06

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

3816

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1215

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1558

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

9283

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

840

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2244

2023.09.04

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

60

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.6万人学习

CSS教程
CSS教程

共754课时 | 94万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn