CSS 左侧内容固定，中间内容超出隐藏，右侧内容全部展示demo

<div class="container">
  <div class="left">左侧内容</div>
  <div class="middle">这是一段很长很长的中间内容，可能会超出容器的宽度，所以我们需要隐藏超出的部分...</div>
  <div class="right">右侧内容</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  width: 90%; /* 设置容器宽度，根据需要调整 */
}

.left {
  flex: 60px ½ auto; /* 固定宽度为60px，可以根据需要调整 */
  white-space: nowrap; /* 防止内部文本换行 */
}

.middle {
  flex: ¾ auto; /* 中间元素占据剩余空间的大部分 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 防止文本换行 */
}

.right {
  flex: 150px ½ auto; /* 固定宽度为150px，可以根据需要调整 */
  white-space: nowrap; /* 防止内部文本换行 */
}