使用col-md类在Text较小时缩小范围

时间:2015-10-06 07:23:30

标签: html css twitter-bootstrap twitter-bootstrap-3

我希望<span>缩小到可能的范围,但是取相应col-md-*分配的最大宽度。
我希望所有这些都在一行中,所以我已经为每个span分配了一些col-md-*。重叠不应该是可见的,意味着如果article name更大,则可以从显示中截断。

<div style="" ng-repeat="">
  <div class="row-fluid">
    <span class="col-md-2"><a href="">User Name</a></span>
    <span class="col-md-3">created New Article</span>
    <span class="col-md-5"><a href="">A new Article name for my next article.</a></span>
    <span class="col-md-2">on Web Designing</span>
  </div>
  <div class="row-fluid pull-right">
    <span class="col-md-12 pull-right">Timestamp</span>
  </div>
</div>

jsFiddle

电流输出 https://jsfiddle.net/errhunter/dfufu058/embedded/result/

预期产出 https://jsfiddle.net/errhunter/0f33ddLL/embedded/result/ 在预期中我删除了所有引导类col-md-*

1 个答案:

答案 0 :(得分:1)

将此css添加到行液中可以解决问题。

.row-fluid {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}