table td tag content exceeds / hide / mouse-over display

Introduction: Sometimes the encounter is such a request, you have to show a lot of that field contents listed on the list, do not put details page

1, td table of contents hidden beyond

<table style="table-layout: fixed;width: XXX px">
    <tr>
          <td style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" ></td>
    </tr>
</table>

table标签需要设定属性 table-layout: fixed;width:XXXpx;
在要超出隐藏的td标签上设定属性  white-space: nowrap;text-overflow: ellipsis;overflow: hidden; 
不要忘了给table加个宽度 

2, table of contents exceeds td hidden, the display content hover

table {
            width: 100%;
            float: left;
            table-layout:fixed;
            width:500px;
            border:1px solid #ccc;
        }

            table tr {
                line-height: 25px;
                border:1px solid #ccc;
            }

             table td {
                border:1px solid #ccc;
                text-align:center;
            }
            .MHover{
                border:1px solid #ccc;
                white-space:nowrap;
                text-overflow:ellipsis;
                overflow:hidden;
            }

<div class="MHover">内容数据</div>
<div class="MALL">内容数据</div>

$(document).ready(function () {
            $(".MALL").hide();
            $(".MHover").mouseover(function (e) {
                $(this).next(".MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5}).show();
            });
            $(".MHover").mousemove(function (e) {
                $(this).next(".MALL").css({ "color": "fff", "position": "absolute", "opacity": "0.7", "background-color": "666", "top": e.pageY + 5, "left": e.pageX + 5 });
            });
            $(".MHover").mouseout(function () {
                $(this).next(".MALL").hide();
            });
        });

        主要需要调试的地方是是偏移量

3, css achieve two rows or three rows display the div (block element), the excess display ellipsis

 一行省略写法：
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

多行省略写法：
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;（行数）
    -webkit-box-orient: vertical;
	
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本