css超出隐藏

1.单行超出隐藏

div {
  overflow:hidden; //超出的文本隐藏
  text-overflow:ellipsis; //用省略号显示
  white-space:nowrap; //不换行
}

2.多行超出隐藏

div{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box;    //将对象作为弹性伸缩盒子模型显示。
  -webkit-box-orient:vertical;  // 从上到下垂直排列子元素
  -webkit-line-clamp:2; //显示的行数
}

3.表格中单行超出隐藏

table{width:100%;table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */}
td{
  width:100%;
  word-break:keep-all;   // 不换行
  white-space:nowrap;   // 不换行
  overflow:hidden;
  text-overflow:ellipsis;
}