参考 http://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html
http://www.zhangxinxu.com/wordpress/?p=4105
只关注实现其效果的css属性,暂无视浏览器兼容性。
table{ table-layout: fixed; } .autocut{ width:200px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis; } .autocut:hover{ overflow: visible; white-space: normal; word-wrap: break-word; }
分别看一下达到其效果的属性:
table-layout: fixed;
让表格布局固定,也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。
overflow: hidden;
让溢出的内容被裁剪,使其不可见。
white-space: nowrap
不折行显示。
text-overflow: ellipsis;
溢出文本显示省略标记...
overflow: visible;
溢出文本可见,正常显示。
white-space: normal;
默认。空白会被浏览器忽略。这个不是很理解
word-wrap: break-word;
在长单词或 URL 地址内部进行换行。
时间: 2024-11-05 23:28:04