html - 使用 col-md 类在文本较小时缩小跨度

Question

我要<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/在预期中，我删除了所有 Bootstrap 类 col-md-* .

Answer 1

将此 css 添加到您的 row-fluid 应该可以解决问题。

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