This is a trick I figured out when a client wanted to have chevron icon to the right of a block title. However, they didn’t want the chevron to break to it’s own line, unless the title itself broke to the new line. Basically, the chevron need to act like it was part of the last word, and maintain space between itself and that word. Also, the chervon moves to the right on hover.

Here's my solution:
<h4 class="title-wrap">
<span class="title">This title can be any length</span> <i class="icon-chevron-right"></i>
<h4>
 
.title-wrap {
 white-space: nowrap;
 .title {
   display: inline;
   white-space: normal;
 }
 i {
   display: inline;
 }
}

The parent element, the .title-wrap in this case, is assigned nowrap, which then in combination with the nbsp; prevents the icon from breaking onto it’s own line. Then, by resetting the white-space on the span we let the .title itself wrap to multiple lines. So the text of the title can be any length, and will wrap when it needs to, but the icon will “stick” to the end of the line and never break on it’s own. If the title is a single word extending the length of the block it will continue past the boundaries of the block including the icon.

You’ll notice that the span and i markup is inline. This is important because certain newlines, those invisible \r\n or \n or \r will actually break the nowrap attribute. In other words, the following will break the “stickiness” of the i icon:

<span class="title">This title can be any length</span>
 
<i class="icon-chevron-right"></i>