Question

我有一个简单的表控件，我在网站运行时使用javascript动态创建。

我使用引导类（例如col-xs-3等）修改了列的宽度。

表中的一列是一个描述字段，我的数据中有许多条目，文本较长。

在大屏幕上，它只是一行文字，所以一切都很好，但是当缩小窗口的大小时，以及使用较小的设备时，宽度太窄，无法在一行显示描述，所以将环绕并使整行增长以适应整个文本。

显示整个文本不是必需的，我需要确保表格行不会增长并且无论屏幕/窗口大小如何都保持固定高度。

有没有办法在css中执行此操作，因为我不想在每个单元格元素中插入额外的div，如果我可以避免它，我已经在其他帖子中看到过。

此外，这需要与safari和chrome兼容。

Answer 1

试试这个

td {
    white-space: nowrap; 
    max-width: 200px;   //or adjust for however wide you want max width to be, 
                        //could also use % widths like max-width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
}

每当文本比表格单元格宽时，这将创建...。

Answer 2

.tr {
max-height: 50px;
overflow-y: auto;
}

Answer 3

您可以将text-overflow设置为td元素，以便在内容超出大小时隐藏内容。您只需要为其设置max-width ...

此外，设置属性white-space:nowrap以将所有文本保留在一行中。

以下是一个示例：http://jsfiddle.net/ev7227bd/

使用css防止表行增长（即保持固定的行高）

3 个答案: