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

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