包裹缩写

优质

小牛编辑

134浏览

2023-12-01

A very powerful tool of the Emmet toolkit. It takes an abbreviation, expands it and places currently selected content in the last element of generated snippet. If there’s no selection, action will silently call “Match Tag Pair” to wrap context element.

这是 Emmet 的一个强大工具，展开缩写，并将选中的内容放在最后生成的元素内。如果没有选择，则调用匹配标签功能，包裹匹配的元素。

Wrapping individual lines 分行包裹

Very commonly, web-developers will need to wrap text in HTML tags. For example, you may receive a text document from your client and need to wrap each paragraph with <p> tag or list of menu items with <ul>/<li> structure.

开发者经常需要用标签包裹文本。例如将文档每个段落用 <p> 标签包裹起来，或者用 <ul>/<li> 结构包裹菜单项。

From syntax you’ve learned that you can repeat element with multiplication operator, like this: ul>li*5. You can use the very same operator to mark repeating element, e.g. tell Emmet that marked element should be repeated by the number of wrapped lines.

从语法可知，使用乘法操作法重复元素，像这样 ul>li*5。对标记元素可以使用与此很类似的操作，标记元素将以选中的行数重复。

Note you don’t need to add multiplier number for wrapping lines (e.g. li*5), you have to use * operator without number, like this: li*.

注意不需要添加乘数 (e.g. li*5)，使用 * 时不能添加乘数，像这样：li*。

Removing list markers 删除列表标记

Whenever you copy text from, let’s say, Microsoft Word, you’ll have list blocks like this:

比如说从 Microsoft Word 中复制列表：

* Unordered item 1
* Unordered item 2
* Unordered item 3

1. Ordered item 1
2. Ordered item 2
3. Ordered item 3

If you try to wrap these lists with ul>li* abbreviation, you will get something like this:

如果用 ul>li* 缩写包裹这些列表，结果：

<ul>
    <li>* Unordered item 1</li>
    <li>* Unordered item 2</li>
    <li>* Unordered item 3</li>
</ul>

This is not very convenient because you have to manually remove list markers.

不是很方便，得手工删除列表标记。

You can let Emmet do this for you: simply add “trim“ (|t, pipe-t) filter to abbreviation to automatically remove list markers from wrapped content:

Emmet 可以帮你：给缩写添加删除过滤器(|t)，将自动删除列表标记：

Controlling output position 控制插入位置

By default, when you wrap something, Emmet puts original content inside the latest element. You can control the output position with $# placeholder. Note that $# is not part of the abbreviation syntax, so you have to put it inside the attribute value or text node, like this: ul>li[title=$#]*>{$#}+img[alt=$#].

Emmet 默认将选中内容放在最后生成的元素内。可以用 $# 控制插入位置。注意 $# 不属于缩写语法，将它放在属性值或文本节点内，像这样：ul>li[title=$#]*>{$#}+img[alt=$#]。