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

问题

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)?

回答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;
}

回答2:

Please use this structure

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

    </a>

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

回答3:

Using css white-space:nowrap; solves text in one line issue.

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

reference site : white space no wrap

来源：https://stackoverflow.com/questions/13948716/how-to-make-bootstrap-icon-display-inline-with-text-in-a-tag