Wrap with Abbreviation

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.

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.

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.

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*.

Removing list markers

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

* 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>* 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:

Read more about filters

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=$#].