详细页面:http://www.verydemo.com/demo_c104_i6936.html
{:; }{:;:;:; }
原理:
本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式:
1. 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)
2. 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。
3. 隐藏超出单元格的部分。
4. 将被隐藏的那部分用省略号代替。
效果图:
源代码:
超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容
兼容性:
....................................................................
FireFox 最新版
Chrome 最新版
相关推荐
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……
纯css 控制超出宽度部分用省略号显示,纯数字跟连续的英文字母请绕行。
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...
CSS实现长标题用省略号显示,以前用JS用网络语言实现,其实CSS也可以的 不错哦~
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
CSS实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width,但是可以设置table的width
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
CSS实现多行文字显示省略号效果.zip
纯CSS实现的表格滚动条效果,非常美观和实用。代码简短清晰。
css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 序号 姓名 年龄 性别 专业 </ul>
HTML+css 超出字符省略号表示,其中包括了HTML代码和CSS样式
html纯css实现表格样式
CSS3实现3D简单动画旋转正方体--海绵宝宝转圈圈 用到: margin: 100px auto; 绝对定位 position absolute; 动画animation animation: move 2s linear infinite; @keyframes move { from{ transform: rotateY(0...
复制代码代码如下:<DIV xss=removed> 就是比如有一行文字,很长,表格内一行显示不下</NOBR></DIV><DIV xss=removed> 就是比如有一行文字,很长,表格内一行显示不下. 有时为了避免文
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号
用css实现孤形表格效果特效代码-CSS代码特效
css文本显示省略号 如果不适应sass 需要把@extend .text-webkit-box替换为.text-webkit-box里面的内容
使用Bootstrap实现分页,并且当页码过多时使用省略号,这篇文章有样式的简单演示:https://blog.csdn.net/u013025627/article/details/50485327 样式只是自己的简单样式,不同的项目有不同的样式风格,只是提供分页...