Come rendere l'icona di bootstrap visualizzata in linea con il testo in un tag?

Question

Ho una pillola di navigazione bootstrap che mostra il testo e una freccia. Sfortunatamente se il testo è troppo lungo, la freccia appare sul bordo dell'ancora. Html ha questo aspetto.

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

demo è qui: http://jsfiddle.net/kyrisu/FNcGX/

Come faccio a visualizzarlo in linea con il blocco di testo (testo può/deve andare a capo)?

Answer 1

Se il testo può avvolgere come hai detto, allora questo può funzionare ..

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

Aggiornamento:

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

.iwt{ 
display:block; 
} 

Answer 2

Utilizzo di css white-space: nowrap; risolve il testo in un problema di linea. sito

.subject-pill > a { 
    border-style: solid; 
    border-width: 1px; 
    white-space:nowrap; 
} 
.subject-pill{ 
    width: 218px; 
} 

di riferimento: white space no wrap

Answer 3

Utilizzare questa struttura

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

    </a> 

prega demo http://jsfiddle.net/FNcGX/9/