html中隐藏溢出怎么写,html-如何隐藏表行溢出？-CSDN博客

html-如何隐藏表行溢出？

我有一些HTML表格，其中文本数据太大而无法容纳。因此，它可以垂直扩展单元格以适应此情况。因此，现在发生溢出的行的高度是数据量较小的行的两倍。这是无法接受的。如何强制表格具有相同的行高1em？

这是一些重现该问题的标记。表格仅应为一行的高度，并隐藏溢出的文字。

Test

table { width:250px; }

table tr { height:1em; overflow:hidden; }

This is a test.

Do you see what I mean?

I hate this overflow.

7个解决方案

97 votes

需要指定两个属性，即table上的table-layout:fixed和单元格上的white-space:nowrap;。您还需要将overflow:hidden;也移动到单元格中

table { width:250px;table-layout:fixed; }

table tr { height:1em; }

td { overflow:hidden;white-space:nowrap; }

这是一个演示。在Firefox 3.5.3和IE 7中测试

Russ Cam answered 2019-11-18T11:31:40Z

22 votes

通常，如果您使用white-space: nowrap;，则可能是因为您知道哪些列将包含换行(或拉伸单元格)的内容。对于这些列，我通常将单元格的内容包装在具有特定class属性的span中，并应用特定的width。

例：

HTML：

My really long description

CSS：

span.description {

display: inline-block;

overflow: hidden;

white-space: nowrap;

width: 150px;

}

user645077 answered 2019-11-18T11:32:17Z

8 votes

在大多数现代浏览器中，您现在可以指定：

My 100px headerMy 200px headerMy 145px header

100px is all you get - anything more hides due to overflow.200px is all you get - anything more hides due to overflow.100px is all you get - anything more hides due to overflow.

然后，如果您应用以上文章中的样式，则如下：

table {

table-layout: fixed; /* This enforces the "col" widths. */

}

table th, table td {

overflow: hidden;

white-space: nowrap;

}

结果使您在整个表中都很好地隐藏了溢出。适用于最新的Chrome，Safari，Firefox和IE。我还没有在IE 9之前的版本中进行过测试-但是我猜它可以在7之前运行，并且您甚至很幸运可以看到5.5或6的支持。 ;)

Troy Alford answered 2019-11-18T11:33:00Z

2 votes

这是我尝试过的东西。基本上，我将“灵活”的内容(td包含太长的行)放在一个高一行的div容器中，并隐藏了溢出。然后，我将文本包装成不可见的文本。但是，您会在分词符时中断，而不仅仅是平滑的中断。

table {

width: 100%;

}

.hideend {

white-space: normal;

overflow: hidden;

max-height: 1.2em;

min-width: 50px;

}

.showall {

white-space:nowrap;

}

Show all

Be a bit flexible about hiding stuff in a long sentence

Show all this too

John Liungman answered 2019-11-18T11:33:25Z

1 votes

唯一的缺点(看来)是表单元格的宽度是相同的。任何解决这个问题的方法？ –乔什·斯托多拉 10月12日15:53

只需定义表格的宽度和每个表格单元的宽度

就像是

table {border-collapse:collapse; table-layout:fixed; width:900px;}

th {background: yellow; }

td {overflow:hidden;white-space:nowrap; }

.cells1{width:300px;}

.cells2{width:500px;}

.cells3{width:200px;}

它就像一个魅力：o)

Popara answered 2019-11-18T11:34:12Z

0 votes

如果接受javascript作为答案，我制作了一个jQuery插件来解决此问题(有关此问题的更多信息，请参见CSS：截断表单元格，但要尽可能地合适)。

要使用插件，只需键入

$('selector').tableoverflow();

插件：[https://github.com/marcogrcr/jquery-tableoverflow]

完整示例：[http://jsfiddle.net/Cw7TD/3/embedded/result/]

Marco answered 2019-11-18T11:35:00Z

0 votes

用class =“ container”将表格包装在div中

div.container {

width: 100%;

overflow-x: auto;

}

然后

#table_id tr td {

white-space:nowrap;

}

结果

Dan Alboteanu answered 2019-11-18T11:35:38Z