Как сделать отображение значка бутстрапа встроенным с текстом в теге?

У меня есть загрузочная навигационная таблетка, которая показывает текст и стрелку. К сожалению, если текст длинный, стрелка появляется на границе якоря. Html выглядит так.

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

Демо здесь: http://jsfiddle.net/kyrisu/FNcGX/

Как я могу отобразить его в строке с блоком текста (текст может/должен завершаться)?

Ответ 1

Если ваш текст можно обернуть, как вы сказали, это может сработать.

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

Обновление

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

.iwt{
display:block;
}

Ответ 2

Пожалуйста, используйте эту структуру

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

    </a>

Пожалуйста, демо http://jsfiddle.net/FNcGX/9/

Ответ 3

Использование css white-space: nowrap; разрешает текст в одной строке.

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

справочный сайт: пустое пространство без обертки