How to make bootstrap icon display inline with text in a tag?

Question

I have bootstrap navigation pill that shows text and an arrow. Unfortunately if the text is to long the arrow appears on the border of the anchor. Html looks like this.

        <a href="#">
          <span> Some longer sample text</span>
          <i class="pull-right icon-chevron-right"></i>
        </a>

Demo is here: http://jsfiddle.net/kyrisu/FNcGX/

How can I display it inline with the block of text (text can/should wrap)?

Answer 1

If your text can wrap as you said then this can work..

<span><i class="pull-right icon-chevron-right"></i>Some longer sample text</span>

Update:

<span class="iwt">
<span>Some longer sample text</span>
<i class="pull-right icon-chevron-right"></i>
</span>

.iwt{
display:block;
}