table{ table-layout: fixed; } td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
原理:
本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式:
1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)
2. white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。
3. overflow: hidden 隐藏超出单元格的部分。
4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
效果图:
源代码:
<!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> <style type="text/css"> table { table-layout: fixed; width: 100%; } td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #ccc; } </style> </head> <body> <table> <thead> <th> 第一列 </th> <th> 第二列 </th> </thead> <tbody> <tr> <td> <span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span><span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span> </td> <td> 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 </td> </tr> </tbody> </table> </body> </html>
兼容性:http://www.php100.com/manual/css3_0/text-overflow.shtml
相关推荐
CSS实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width,但是可以设置table的width
html纯css实现表格样式
CSS实现长标题用省略号显示,以前用JS用网络语言实现,其实CSS也可以的 不错哦~
CSS实现多行文字显示省略号效果.zip
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……
纯CSS实现的表格滚动条效果,非常美观和实用。代码简短清晰。
css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 序号 姓名 年龄 性别 专业 </ul>
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
纯css 控制超出宽度部分用省略号显示,纯数字跟连续的英文字母请绕行。
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
CSS实现表格样式及全选功能,详情看博客http://blog.csdn.net/mybelief321/article/details/50276253
代码如下: XML/HTML Code复制内容到剪贴板 ;height:20px;text-overflow:ellipsis;...我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
使用Bootstrap实现分页,并且当页码过多时使用省略号,这篇文章有样式的简单演示:https://blog.csdn.net/u013025627/article/details/50485327 样式只是自己的简单样式,不同的项目有不同的样式风格,只是提供分页...
CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+...内容不多但是绝对实用,其实在做数据显示时还是推荐用表格,因为不是所有的地方数据显示有用DIV+CSS,在数据显示时表格还是有很大的优势。不过这个还是要看个人爱好!
js css精美表格js css精美表格js css精美表格
使用CSS不用程序实现文字自动截断 用省略号代替
利用CSS动画制作 Html 表格数据滚动显示, 实际自己开发也不难实现。实现的方法很多,下面是本人的一种实现方案,分享给大家。
网页特效用CSS样式定义的圆角表格......................