网页中表格有时一格的内容太多都放进去格式会难看，导致格式大小不一，而且有些时候没必要显示所有信息，比如一些文章概要只要显示一两百个字即可，后面用省略号代替。
以前看到别人网页上有这样的展示方法，我以为是字符串拼接的呢，后来发现并不是那么简单，因为鼠标移到省略号上竟然可以全部显示，不应该是通过js将数据提前存储起来的，如果是那样搞的话就太费事了。今天研究了下果然是有办法的，可以通过css来实现。下面直接上代码看效果。
<style> .test{background:#ccc; width:10em; overflow:hidden; white-space:nowrap;text-overflow: ellipsis;} .test:hover{text-overflow:inherit; overflow:visible;} </style> <div class="test">你好测试一下，明天太阳照常升起</div>
鼠标移动上去后自动都显示：
手机端的效果是点击“...”会显示所有文字，点击其他地方恢复
解析：
省略号是靠overflow: ellipsis;实现的，如果要将文字显示为“更多”就写成：overflow: '更多'; 后面是可以自由设置的，尝试设置为：overflow: '666';看看。
拓展：
如果要控制显示3行，超出后末尾用...怎样用css实现？答案是只能通过js控制字数，即便chrome支持但是非标准方法，在火狐是没效果的。只能用控制字数来处理。
拓展2：
如果要3行之后再显示省略号怎么办呢？
处理办法:
将white-space去除，并且加上:
display:-webkit-box;
-webkit-line-clamp: 3/第几行裁剪/
-webkit-box-orient:vertical;
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 常见结合属性：
2-1.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
2-2.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
2-3.text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
