最近学习样式，想用样式来控制GridView中超长字符的省略显示，可是网上从后台的方式是在让我诟病，当然，个人喜好问题：P  由于GridView最终是Table形式输出，于是从table实现该样式找起：

这是从网上找到的一篇文章：

不记得是什么时候，有人在用table模拟DataGrid的时候说，为什么td超出设置为固定宽度的文字不能隐藏，而是会直接换行呢？

是的，事实确实如此，如：

table {width:500px;;}

.col1 {width:100px;}

.col2 {width:200px;}

.col3 {width:200px;}

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

运行如上代码，你会发现单元格里超过固定宽度的文字不会被隐藏掉，而是换行显示了，显然，这并不是我的本意。

看起来，这似乎是table的一个特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的组合，说到底就是white-space:nowrap这个东东没起作用，所以看起来overflow:hidden就失效了。{注：如果是一连串的无意义字符则可生效，例如：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，这个时候就不需要{white-space:nowrap}来强制它在一行内显示，因为这一连串的a会被认定为是一个字而不发生换行，从而超出.col1宽度的a会被隐藏}

［解决方案一：］

后来有人提到使用百分比宽度就可以了，经测试，确实可以，稍微将第一段的其中几行样式修改一下，其它的不变：

.col1 {width:20%;}

.col2 {width:40%;}

.col3 {width:40%;}

将修改后的代码运行后，会发现，超出宽度的文字果然被隐藏了，想要的效果似乎得到了。

事实上使用百分比宽度确实可以解决这个文字隐藏的问题，但这似乎并不是想要的最佳的解决方案，因为有的时候我们需要的是一个固定的宽度，而不是百分比宽度。

而这一切的根源就在于如何使得单元格内的文字不换行在一行内显示。

［解决方案二：］

要达到这个要求，除了使用样式，我们也许还会想到一个许久不用了的标签，这个元素的作用就是强制内容在一行显示。以上代码做如下修改，其它则不变：

做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。

沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。

既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？

最佳方案：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

回头来看看Table：TD也玩overflow:hidden

table {width:500px;;}

.col1 {width:100px;}

.col2 {width:200px;}

.col3 {width:200px;}

th strong {display:block;width:100%;}

tr strong,tr td {white-space:nowrap;overflow:hidden;}

产品名称产品介绍产品备注

神舟 优雅Q400N优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器迅驰4平台，突出的性价比，漂亮的外观

运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。

接下来说说自己的使用：

首先用tbody在GridView中是不太现实的，除非你继承了GridView做控件，那么目前的做法似乎只有用百分比的形式，因为不知道为什么,white-space属性根本不生效，唉，继续，希望能找到更好的方式，也希望大家拍砖！