前端实战——完美解决文本框超出内容用“……”表示，鼠标滑过时显示隐藏内容

在前台的开发过程中我们通常会遇到这样的问题。内容太多，显示不全，若要全部显示出来的话，又觉得太挤得慌。怎么办？
如下图所示（让用户看了就会感觉很不爽！）

那么这个时候需求就有了：
1、要求在你内容在超出文本框的时候，需要用省略替代。
2、还能够使得页面的元素自动适应页面的大小进行变化调整。
（再来一个高级一点的需求。）
3、在你的鼠标滑过的时候，将内容放到一个tooltip中显示出来，鼠标离开文本框提示框就自动消失掉。
要求的效果如下：

这样的需求，怎么来解决呢？
core code：

• JavaScript部分

 <script type = "text/javascript">

   var tdContent = $('#test').text() ;
   $('.test').qtip({
        content: tdContent,
        show: {
            effect: function() {
                $(this).slideDown();
            }
        },
        hide: {
            effect: function() {
                $(this).slideUp();
            }
        }
     });

 script>

• CSS部分

<style>
 .ctl{
   table-layout:fixed
 }
  .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
style>

demo下载地址如下： （访问密码 4d1b）
https://yunpan.cn/cxcGNwLkARYXV

小结：里面用到了一个强大的JQuery插件——qtip（如何使用详情参见我的另外一篇博客：http://blog.csdn.net/t131452n/article/details/50655526）。另外，其中用到了一个css的技术，本人已经封装到了easyUI.css文件中，也是方便自己以后在使用JQuery——easyUI的过程中达到更好的复用效果。简单的来说，就是改了改easyUI的一些底层代码。