如何隐藏表行溢出？

问题描述：

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

I have some html tables where the textual data is too large to fit. So, it expands the cell vertically to accommodate for this. So now rows that have the overflow are twice as tall as rows with smaller amounts of data. This is unacceptable. How can I force table to have the same row height of 1em?

这里是一些标记，。表格只能是一行的高度，并且隐藏溢出的文字。

Here is some markup that reproduces the problem. Table should only be the height of one line, with the overflowing text hidden.

<!DOCTYPE html>

<html>
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      table { width:250px; }
      table tr { height:1em; overflow:hidden; }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>This is a test.</td>
        <td>Do you see what I mean?</td>
        <td>I hate this overflow.</td>
      </tr>
    </table>
  </body>
</html>

答

需要指定两个属性， table-layout：fixed $ c>在表和 white-space：nowrap; 细胞。您还需要将 overflow：hidden; 移动到单元格中。

Need to specify two attributes, table-layout:fixed on table and white-space:nowrap; on the cells. You also need to move the overflow:hidden; to the cells too

table { width:250px;table-layout:fixed; }
table tr { height:1em;  }
td { overflow:hidden;white-space:nowrap;  }

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

Here's a Demo . Tested in Firefox 3.5.3 and IE 7

相关推荐