主要代码:
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
将被隐藏的那部分用省略号代替。
效果图:
转转:http://www.cnblogs.com/warrentech/archive/2012/05/09/table_ellipsis.html
分享到:
相关推荐
CSS实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width,但是可以设置table的width
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...
CSS实现长标题用省略号显示,以前用JS用网络语言实现,其实CSS也可以的 不错哦~
html纯css实现表格样式
CSS实现多行文字显示省略号效果.zip
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……
纯CSS实现的表格滚动条效果,非常美观和实用。代码简短清晰。
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 序号 姓名 年龄 性别 专业 </ul>
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
纯css 控制超出宽度部分用省略号显示,纯数字跟连续的英文字母请绕行。
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+...内容不多但是绝对实用,其实在做数据显示时还是推荐用表格,因为不是所有的地方数据显示有用DIV+CSS,在数据显示时表格还是有很大的优势。不过这个还是要看个人爱好!
代码如下: XML/HTML Code复制内容到剪贴板 ;height:20px;text-overflow:ellipsis;...我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
CSS实现表格样式及全选功能,详情看博客http://blog.csdn.net/mybelief321/article/details/50276253
使用CSS不用程序实现文字自动截断 用省略号代替
CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
主要介绍了CSS超出文本指定宽度用省略号代替和文本不换行的相关资料,小编觉的实用性非常,特此分享到脚本之家平台,供大家参考
js css精美表格js css精美表格js css精美表格
让ie支持css3部分功能,阴影背景效果、圆角效果、渐变背景效果
1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有...