网页制作 TD也可以溢出隐藏显示

2019-10-26 17:25:23

字体：大中小

来源：转载

供稿：网友

或许我这篇文章一取这样的名字，就会有人要问了：你怎么还在关注table啊，那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了，不知道还有什么好了。

　　table真的过时了么？你真的了解table么？你真的会用table么？

　　打口水仗不是我们要做的，留给那些时间很充裕的人吧。

　　言归正传：

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

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

提示：您可以先修改部分代码再运行

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

　　看起来，这似乎是table的一个特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的组合，说到底就是white-space:nowrap这个东东没起作用，所以看起来overflow:hidden就失效了。{注：如果是一连串的无意义字符则可生效，例如：<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>，这个时候就不需要{white-space:nowrap}来强制它在一行内显示，因为这一连串的a会被认定为是一个字而不发生换行，从而超出.col1宽度的a会被隐藏}

　　［解决方案一：］

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

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

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

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

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

上一篇：HTML基础之HTML内容细则

下一篇：网页设计 TabIndex元素

学习交流

电脑开不了机的原因和解决办法

电脑开不了机的原因和解决办法...

热门图片

猜你喜欢的新闻

猜你喜欢的关注