[分享]css元素显示在一行溢出不显示

在HTML中，CSS样式是用来控制网页元素显示效果的，CSS元素显示在一行溢出不显示，是很多前端工程师需要面对的问题。这里介绍几种实现CSS元素在一行溢出不显示的方法。代码1: .myclass{ d...

在HTML中，CSS样式是用来控制网页元素显示效果的，CSS元素显示在一行溢出不显示，是很多前端工程师需要面对的问题。这里介绍几种实现CSS元素在一行溢出不显示的方法。

代码1:
.my-class{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

代码2:
.my-class{
  display: flex;
  overflow: hidden;
}
.my-class .child{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

代码3:
.my-class{
  display: table;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}
.my-class .child{
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} 

以上三种实现CSS元素在一行溢出不显示的方法，都能够达到同样的效果。不同的是它们在实现上的差异。

第一种方法是使用了inline-block和nowrap这两个CSS属性来使元素排列在同一行，并且不能换行。同时，设置了overflow属性为hidden，避免出现滚动条。text-overflow属性则把溢出的内容变成省略号。

第二种方法使用了CSS的弹性盒模型。通过将父元素设置为display：flex，将子元素设置为flex：1，自动填充整个父元素的宽度，并且溢出的部分会隐藏。同样，使用text-overflow属性把溢出内容变成省略号。

第三种方法使用了CSS中的表格布局。通过将父元素设置为display：table，将子元素设置为table-cell，其宽度自适应父元素。此时，也需要text-overflow属性来将溢出的内容省略显示。

以上三种方法都能达到同样的效果。在实际开发中，可以根据具体情况选择适合的方法。