css超出隐藏

1.单行超出隐藏div {overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //用省略号显示white-space:nowrap; //不换行}2.多行超出隐藏div{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;//将对象作为弹性伸缩盒子模型显示。-webkit-box-or

一周七喜h

20308人浏览 · 2022-02-19 10:34:48

一周七喜h · 2022-02-19 10:34:48 发布

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