如何在bootstrap中正确使用文本溢出

Question

我正在尝试隐藏li的溢出文字，我的li看起来像这样

<li class="food_item">
   <a href="#" class="food_name" title="test">
       testtesttesttesttesttesttesttesttest
   </a>
   <span>(12)</span>
</li>
<li class="food_item">
   <a href="#" class = "food_name">a short one</a>
   <span>(12)</span>
</li>

和我的css

.food_category>.food_item {
  width: 25%;
  float: left;
  line-height: 30px;
}
.food_category .food_name {
  font-size: 14px;
  margin: 0px 4px 0px 0px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width: 80%;
  display: inline-block;
}

food_category是ul代码的类名，现在效果如下：

span和a标记不在同一行，我假设它是关于inline-block的{​​{1}}属性，但是如果删除它， a将无效，溢出文本将不会被隐藏。我被困在这里，任何人都可以帮助我吗？如何在保持溢出文字隐藏的同时使text-overflow和a显示在同一行？

更新
这是jsfiddle link，顺便说一下，我没有设置span的{​​{1}}。我想要的是将css文字放在span标签后面，就像这样span。谢谢！

Answer 1

关于更新，您需要将anchor标记和span标记设置为在列表元素的顶部垂直对齐。将以下内容添加到CSS中：

.food_item a,
.food_item span {
    vertical-align: top;    
}

这会产生所需的行为。

<强> DEMO

Answer 2

您可以执行以下操作：

.food_item span {
    display: inline-block;
    float:left;
}

并将float:left;添加到.food_item .food_name

.food_item .food_name {
  font-size: 14px;
  margin: 0px 4px 0px 0px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width: 60%;
  display: inline-block;
  float:left;
}

FIDDLE

您可能需要更新span的间距的边距/填充。

我还建议在每个clearfix元素上添加li之类的内容以防止浮动问题：

<li class="food_item clearfix">
   ...
</li>
<li class="food_item clearfix">
   ...
</li>

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}