Sublime Text 2 wrapping selection in tag

Solution 1:

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.

Solution 2:

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

Solution 3:

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,

Solution 4:

Create a custom snippet, for example, to insert a span tag. Go to the app menu: Tools > New Snippet ..., and copy to the window the snippet below:

<snippet>
    <content><![CDATA[
<span style="color:#0000FF">$SELECTION$1</span>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>span</tabTrigger>
    <description>HTML - span - color - blue</description>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.html</scope>
</snippet>

... then save the snippet to file with e.g. html-span--color name and bind that snippet to a key combination in Preferences > Key Bindings-User, creating a new key entry, for example:

{ "keys": ["alt+shift+c"], "command": "insert_snippet", "args": { "name": "Packages/User/html-span--color.sublime-snippet" } }

It is supposed that a location of the snippet is Packages/User/ directory.

Now select any text that you need to wrap in the span tag and press Alt+Shift+c or type 'span', press Tab, a cursor will be set to required position within the tag, just type your text.

I have successfully tested the snippet and key binding with Sublime Text 3 in Ubuntu Linux.

Solution 5:

to make your life easy while you are in Sublime text3: type any of these(p, h1, div, header, footer, title...) and hit Tab for example if you want div Just type div and hit Tab