转:td之overflow:hidden 多余文本隐藏效果

table-layout

语法:
  table-layout : auto | fixed 
  参数:
  auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
  fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

隐藏对象内的多余文本,一般做法:

selector{width:*px; white-space:nowrap; overflow:hidden;} 但是这段代码用在td上不会生效,单元格依然会被撑开~···

解决办法:同时为其table定义width:*; table-layout : fixed OK:多余文本已经被自动隐藏。

 

例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回头来看看Table:TD也玩overflow:hidden</title>
<meta name="Author" content="Doyoe(飘零雾雨), [email protected]" />
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:100px;}
td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">

<tr>
<td class="col1"><strong>产品名称</strong></td>
<td class="col2"><strong>产品介绍</strong></td>
<td class="col3"><strong>产品备注</strong></td>
</tr>


<tr>
<td>神舟 优雅Q400N</td>
<td><a href="shou_2.htm">优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器</a></td>
<td>迅驰4平台,突出的性价比,漂亮的外观</td>
</tr>

</table>


<table width="100%" border="0" cellspacing="0" cellpadding="0">

   <tr>
   <td><input type="checkbox"></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器</td>
   <td class="motif"><a href="shou_2.htm">欢迎使用963邮箱!</a></td>
   <td>&nbsp;</td>
   <td>10月24日</td>
   <td>7.56K</td>
   </tr>
   <tr>
   <td><input type="checkbox"></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td align="left"><a href="#">963开发小组</a></td>
   <td class="motif"><a href="#">欢迎使用963邮箱!</a></td>
   <td>&nbsp;</td>
   <td>10月24日</td>
   <td>7.56K</td>
   </tr>
</table>


</body>
</html>

 

 

另外一种解决方法:

在td中套个div,定义了td的宽度,然后div只要定义高度就可以了,如:

{height:25px; line-height:25px;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

你可能感兴趣的:(overflow)