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;
}