当然可以纯CSS搞定这个需求！不用写任何JavaScript，咱们通过Flex布局结合max-width、flex属性的组合就能完美实现你要的效果。

核心思路 #

我们要实现的逻辑是：

• 当两个区块的文本都足够长（各自内容宽度超过容器的50%），则每个区块强制占容器宽度的50%，平分空间；
• 当至少有一个区块文本较短时，每个区块的宽度由自身内容决定，不会被拉伸填满容器，保持内容的自然宽度。

重构后的代码 #

CSS 代码

.wrapper {
  width: 200px;
  height: 50px;
  background: beige;
  margin-bottom: 20px;
  display: flex; /* 启用Flex布局 */
  gap: 8px; /* 可选：给区块之间添加间距，提升视觉效果 */
}

.block {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
  flex: 0 1 max-content; /* 关键：宽度由内容决定，空间不足时允许收缩 */
  max-width: 50%; /* 强制最大宽度为容器的50%，避免单个区块过宽 */
  min-width: 0; /* 允许区块收缩到小于内容的最小宽度，确保长文本能被截断 */
}

.block.l {
  background: blue;
  color: white; /* 加白色文字，方便短文本阅读 */
}

.block.r {
  background: red;
  color: white;
}

HTML 代码

<div class="wrapper">
  <div class="block l"> short </div>
  <div class="block r"> short </div>
</div>
<div class="wrapper">
  <div class="block l"> long text long text long text long text long text long text long text </div>
  <div class="block r"> short </div>
</div>
<div class="wrapper">
  <div class="block l"> long text long text long text long text long text long text long text </div>
  <div class="block r"> long text long text long text long text long text long text long text </div>
</div>

属性解释 #

让我们拆解一下关键属性的作用：

• display: flex：把容器转换成Flex布局，让子元素可以使用Flex的布局特性；
• flex: 0 1 max-content：flex-grow:0表示区块不会主动拉伸占用多余空间，flex-shrink:1表示空间不足时允许收缩，flex-basis:max-content表示区块的基础宽度由自身内容的自然宽度决定；
• max-width: 50%：限制每个区块的最大宽度为容器的一半，确保两个长文本区块能各占50%；
• min-width: 0：解除Flex子元素默认的min-width:auto限制，允许区块收缩到小于内容的最小宽度，这样长文本才能被text-overflow:ellipsis截断。

效果验证 #

• 两个短文本：两个区块都只占自身内容的宽度，并排显示，容器右侧留白，符合需求；
• 一长一短文本：长文本区块被限制在容器的50%宽度，短文本区块保持内容宽度，总宽度不填满容器，符合需求；
• 两个长文本：两个区块各占容器的50%宽度，刚好填满容器，文本超出部分被截断显示省略号，符合需求。

内容的提问来源于stack exchange，提问作者Walter White