Flex 布局中，如何让两个等宽 Div 的文字换行且省略多余部分？

.container {
  display: flex;
}

.box1, .box2 {
  flex: 1;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上面的例子中，flex: 1 会让两个 div 平分剩余的空间，而 flex-shrink: 0 则会防止它们缩小。white-space: nowrap 会禁止文字换行，overflow: hidden 会隐藏多余部分，text-overflow: ellipsis 会在末尾显示省略号。这样，如果两个 div 里的文字太长，它们就会自动换行并显示省略号，而不会影响它们的宽度比例。