css - 使用 Bootstrap 3 每个单元格最多一行内容的大小表

Question

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

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

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

我有两个问题:

• 当单元格中的文本太长时，它会破坏我设置的大小。它可以通过使用自定义大小类而不是 Bootstrap 来修复，但我宁愿避免使用这种方法，因为列的大小与 col-md-1 不同。至 col-md-12在生产表中，而且它不能解决下一个问题:
• 申请我的 .oneliner class 时，它将所有文本放在一行中，拉伸(stretch)父级(即使使用我的自定义大小调整类)，事件如果我在 <span> 上申请或 <p>在我的里面 <td> .

JSFiddle 在这里:http://jsfiddle.net/85TjP/2/ (更新)

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

Answer 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;
}