我有一个固定宽度的侧边栏,由一个bootstrap导航列表组成,其中一些列表元素具有右对齐标签.
例如:
<li> <a href="#">abc_test_randomrandom</a> <span class="pull-right label">0000</span> </li>
但是,如果链接很长,这不起作用.它会扩展以填充整行,并将标签推送到下一行.
我已经提出了一个jsFiddle demo来证明这种行为.编辑:现在也是gist.
所需的行为是同一行上的abc_test_randomrandom和0000,如果需要,长字符串将换行到下一行.这可能吗?
解决方法
是.使用固定宽度并给出溢出:隐藏;对于多余的文本省略号.
li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;} li span {width: 40%; display: inline-block;}
我无法打开jsFiddle.所以看不出确切的问题.