如何用CSS实现两个动态字符串的水平空间分配？

你遇到的核心问题是flex布局中元素的收缩规则不符合需求，导致短字符串在需要保留自身宽度的场景下被错误截断。结合你的三个空间分配规则，我们可以通过调整CSS属性并配合少量JavaScript逻辑来实现需求。

完整代码实现 #

HTML

<div class="container">
    <div class="text left">Short text on the left side</div>
    <div class="text right">This is a very long text that will take up the remaining space and will be truncated if it overflows.</div>
</div>
<div class="container">
    <div class="text left">This is a very long text that should be truncated when both texts exceed half the container width</div>
    <div class="text right">This is another very long text that should also be truncated to half the container width</div>
</div>
<div class="container">
    <div class="text left">Short left</div>
    <div class="text right">Short right</div>
</div>

CSS

.container {
  display: flex;
  width: 600px;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 10px;
  justify-content: space-between;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
  min-width: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.left {
  flex: 0 1 auto;
  background-color: red;
}

.right {
  flex: 0 1 auto;
  background-color: green;
}

JavaScript

// 初始化处理每个容器
function handleContainerLayout() {
  document.querySelectorAll('.container').forEach(container => {
    const left = container.querySelector('.left');
    const right = container.querySelector('.right');
    // 重置之前的动态样式
    left.removeAttribute('style');
    right.removeAttribute('style');

    const containerWidth = container.offsetWidth;
    const gap = parseInt(getComputedStyle(container).gap);
    const availableWidth = containerWidth - gap;
    const halfAvailableWidth = availableWidth / 2;

    const leftContentWidth = left.scrollWidth;
    const rightContentWidth = right.scrollWidth;

    // 规则2：两个字符串都超过容器一半宽度
    if (leftContentWidth > halfAvailableWidth && rightContentWidth > halfAvailableWidth) {
      left.style.flex = '1 1 50%';
      right.style.flex = '1 1 50%';
      left.style.maxWidth = `${halfAvailableWidth}px`;
      right.style.maxWidth = `${halfAvailableWidth}px`;
    } else {
      const totalContentWidth = leftContentWidth + rightContentWidth;
      // 规则1：总宽度不超过容器，保持自身宽度
      if (totalContentWidth + gap <= containerWidth) {
        left.style.flex = '0 0 auto';
        right.style.flex = '0 0 auto';
      } else {
        // 规则3：一短一长，短的占自身空间，长的占剩余空间
        if (leftContentWidth <= halfAvailableWidth) {
          left.style.flex = '0 0 auto';
          right.style.flex = '1 1 auto';
          right.style.maxWidth = `${availableWidth - left.offsetWidth}px`;
        } else {
          right.style.flex = '0 0 auto';
          left.style.flex = '1 1 auto';
          left.style.maxWidth = `${availableWidth - right.offsetWidth}px`;
        }
      }
    }
  });
}

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', handleContainerLayout);
// 窗口 resize 时重新计算
window.addEventListener('resize', handleContainerLayout);

逻辑说明 #

1. 规则1实现：通过justify-content: space-between让左右元素在总宽度不足容器时自动左右对齐，保持自身内容宽度。
2. 规则2实现：通过JavaScript检测两个元素的内容宽度是否都超过容器可用宽度的一半，若是则设置两者flex: 1 1 50%并限制最大宽度为一半，强制各占50%并截断。
3. 规则3实现：当总宽度超过容器但仅一个元素过长时，固定短元素的宽度（flex: 0 0 auto），让长元素填充剩余空间并设置对应最大宽度，超出部分自动截断。

内容的提问来源于stack exchange，提问作者alexey.m