【问题标题】：Sized table with at most one line of content per cell with Bootstrap 3使用 Bootstrap 3 每个单元格最多包含一行内容的大小表
【发布时间】：2014-03-29 10:43:17
【问题描述】：

我正在尝试显示一个表格（使用 Bootstrap 的col-md-X 给定列宽），每个单元格最多包含一行（文本）内容。有关我想要的示例，请参阅我的 jsfiddle 中的最后一个示例。

我使用这个 oneliner css 类来限制显示的文本数量：

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

我有两个问题：

当单元格中的文本太长时，它会破坏我设置的大小。它可以通过使用自定义大小类而不是引导程序来修复，但我宁愿避免使用这种方法，因为生产表中列的大小从 col-md-1 到 col-md-12 不等，而且它不能解决下一个问题：
应用我的.oneliner class 时，它会将所有文本放在一行中，拉伸父级（即使使用我的自定义大小调整类），如果我在<span> 或<p> 上应用我的@987654329 内的事件@。

JSFiddle 在这里：http://jsfiddle.net/85TjP/2/（更新）

我真的很想避免为此使用 js。

【问题讨论】：

标签： css twitter-bootstrap html-table

【解决方案1】：

请参阅下面的示例，了解如何实现这一点：

Fiddle

将以下属性应用于元素将确保仅显示一行文本并且不会调整大小：

white-space: nowrap;
overflow:hidden;

如果有任何文本溢出，您可以使用下面的省略号显示，仅用于视觉目的：

text-overflow: ellipsis;

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>Something quite long</div>
        <div class='cell'>here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.</div>
    </div>
</div>

CSS

.table {
    margin:0;
    padding:0;
    display:table;
    table-layout: fixed;
    width:100%;
    max-width:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

【讨论】：

谢谢，但我更喜欢更语义化的方式（毕竟，我是在显示一个表格）。我也更愿意坚持使用 bootstrap 3（无需将 css 从 boostrap 复制到定制类）。更不用说我的真实案例表不（不）限于相同宽度的两列。
以上是一个例子，只有解释代码。你能给出一个实际的生产示例/html吗？您是否尝试过简单地将white-space: nowrap;overflow:hidden;text-overflow: ellipsis; 应用到您想要该行为的表格单元格？
是的，我尝试将此 css 添加到我的表中，但没有成功，我将更新问题和 JSfiddle 以获得更准确的解释

【解决方案2】：

没关系，找到解决办法了。

将style="table-layout: fixed;" 应用于表格可以解决这两个问题，最终的 html+css 如下所示：

CSS

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

HTML

<table class="table" style="table-layout: fixed;">
    <tr>
        <th class="col-md-6">Some title</th>
        <th class="col-md-6">Other title</th>
    </tr>
    <tr>
        <td>Short row</td>
        <td class="oneliner">Much, much longer row, this is so long it's going to overflow</td>
    </tr>
</table>

当然table-layout : fixed;应该通过CSS应用

【讨论】：