使用text-overflow:ellipsis时防止DIV换行的纯CSS解决方案

我完全懂你的需求——要让可变长度的文本和那几个蓝色小方块始终保持在同一行，文本过长时自动显示省略号，还要纯CSS方案、支持响应式布局对吧？原来的代码里因为文本容器设置了width:100%，再加上嵌套结构和浮动的使用，导致方块被挤到新行，咱们用Flexbox来完美解决这个问题，它天生就是为这种弹性布局场景设计的。

修正后的完整代码 #

CSS部分 #

.page-container {
  width: 400px; /* 示例约束，实际响应式时可改为max-width或直接移除 */
  background: yellow;
  display: flex; /* 启用Flex布局 */
  align-items: center; /* 让文本和方块垂直居中对齐 */
  padding: 8px; /* 可选，增加内边距让布局更美观 */
}

.one-line-div {
  font-size: larger;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1; /* 占据父容器剩余所有可用空间 */
  min-width: 0; /* 关键：允许文本容器被压缩，触发省略号 */
}

.more-divs {
  flex-shrink: 0; /* 禁止方块容器被压缩，保持固定大小 */
  display: flex;
  gap: 12px; /* 替代margin-right，统一设置方块间距 */
  margin-left: 12px; /* 可选，文本和方块之间增加间距 */
}

.div1, .div2, .div3, .div4 {
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: blue;
}

HTML部分（修正嵌套结构问题） #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page">
  <div class="page-container">
    <!-- 文本容器和方块容器放在同一层级，确保同行排列 -->
    <div class="one-line-div">Text text, so much text here, what do we do with all this text? Let's add even more text to test the ellipsis!</div>
    <div class="more-divs">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
    </div>
  </div>
</div>
</body>

核心调整说明 #

• Flexbox父容器：给.page-container设置display:flex，直接让子元素默认在同一行排列，从根源解决换行问题，而且天然支持响应式，容器宽度变化时会自动调整。
• 文本容器的flex:1：让文本容器自动填充父容器中除了方块容器之外的所有空间，文本长度变化时会自适应，过长则触发截断。
• min-width:0：这是Flexbox的关键小细节——默认Flex子元素不会小于内容的最小宽度，加上这个属性才能让文本容器在空间不足时被压缩，从而触发text-overflow:ellipsis效果。
• 方块容器的flex-shrink:0：确保蓝色小方块不会被压缩变形，始终保持固定的尺寸和间距，不管文本多长都不会被影响。
• gap属性优化间距：用Flex的gap替代逐个设置margin-right，不仅更简洁，还避免了最后一个方块多余的右侧间距问题。

这样调整后，不管容器宽度怎么变化（比如在移动端缩小屏幕），文本都会自动截断显示省略号，蓝色方块始终和文本保持在同一行，完全用CSS实现，不需要任何JS代码。

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