CSS 如何使引导程序图标与标签中的文本一起显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13948716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bootstrap icon display inline with text in a tag?
提问by kyrisu
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.
我有显示文本和箭头的引导导航药丸。不幸的是，如果文本太长，箭头会出现在锚点的边框上。Html 看起来像这样。
<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/
演示在这里：http: //jsfiddle.net/kyrisu/FNcGX/
How can I display it inline with the block of text (text can/should wrap)?
如何在文本块中内嵌显示它（文本可以/应该换行）？
采纳答案by 000
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;
}
回答by ShibinRagh
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/
回答by Surinder ツ
Using css white-space:nowrap; solves text in one line issue.
使用 css white-space:nowrap; 解决一行文本问题。
.subject-pill > a {
border-style: solid;
border-width: 1px;
white-space:nowrap;
}
.subject-pill{
width: 218px;
}
reference site : white space no wrap
参考站点： 空白不换行
