css单行溢出省略(flex布局)

.container {
  display: flex;
  height: 50px;
}

.column {
  flex: 1;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.column:first-child,
.column:last-child {
  width: 100px;
}

.column.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  <div class="column">第一列</div>
  <div class="column ellipsis">第二列内容非常长，超过宽度会溢出</div>
  <div class="column">第三列</div>
</div>

解释：

1. .column 类选择器的样式包括 flex: 1;，它会使每个列元素平均分配可用空间。
2. 添加了 .ellipsis 类选择器的样式，该样式会应用于第二列，用于设置内容超出宽度时的省略号效果。
3. overflow: hidden; 属性用于隐藏超出列宽度的内容。
4. white-space: nowrap; 属性用于防止文本换行。
5. text-overflow: ellipsis; 属性用于在内容溢出时显示省略号（...）。

效果图：