Sublime Text 2 wrapping selection in tag

The answers are all good. Here is where key bindings are for customizing:

In Preference: Key Bindings - Default:

{ 
  "keys": ["ctrl+shift+w"], "command": "insert_snippet", 
  "args": { "name": "Packages/XML/long-tag.sublime-snippet" } 
}

If you have Emmet, the emmet version is

{ "keys": ["super+shift+w"], "command": "wrap_as_you_type"}

Edit them in Preferences: Key Bindings - User to your liking,


Single line

If you want to convert this

Lorem ipsum dolor sit amet.

to this

<div>Lorem ipsum dolor sit amet.</div>  

do this:

  • Select the text, or press CTRL + L (it will select the current line)
  • Press ALT + SHIFT + W
  • Type the desired tag (it will overwrite the default p tag)

Multiple lines

If you want to convert this

Item 1
Item 2
Item 3

to this

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

do this:

  • Select the text, or press CTRL + L multiple times
  • Press CTRL + SHIFT + L (it will make one selection per line)
  • Press ALT + SHIFT + W
  • Type the desired tag (it will overwrite the default p tag)

You can also select the text using SHIFT + MOUSE RIGHT BUTTON, and in this case you can skip the second step.

Using Emmet

If you want to convert this

Item 1
Item 2
Item 3

to this

<nav>
  <ul class="nav">
    <li class="nav-item1"><a href="">Item 1</a></li>
    <li class="nav-item2"><a href="">Item 2</a></li>
    <li class="nav-item3"><a href="">Item 3</a></li>
  </ul>
</nav>

do this:

  • Select the text
  • Press SHIFT + CTRL + G (wrap with abbreviation)
  • Type nav>ul.nav>li.nav-item$*>a

Note for Mac users:

ALT + SHIFT + W = CTRL + SHIFT + W

CTRL + SHIFT + L = CMD + SHIFT + L


Using Emmet, place the cursor in the tag you want to wrap and press ctrl + w (for MacOS) or Alt+Shift+W (for Windows), a box will pop up to enter the type of tag you want to wrap with.