如何仅用CSS消除span换行且不将文本移至新行？

你的问题核心是浮动元素导致行内元素的可用空间不足，white-space: nowrap反而让整个span被挤到下一行。这里提供两种纯CSS方案解决：

方案1：Flex布局（推荐） #

Flex布局是现代CSS里处理这类排列问题最简洁的方式，它能让容器内的元素自动在同一行排列，不会因为空间不足导致元素换行：

修改你的CSS代码如下：

#outer-div { 
  border: 1px dashed red; 
  line-height: 50px; 
  width: 350px; 
  display: flex; /* 启用flex布局 */
  align-items: center; /* 保持元素垂直居中，和原line-height效果一致 */
}

.inner-div { 
  border: 1px dashed red; 
  height: 50px; 
  width:80px; 
  /* 去掉float，flex布局不需要浮动 */
}

#title { 
  white-space: nowrap; /* 强制文本不换行 */
  margin-left: 10px; /* 可选，和左侧div拉开一点间距更美观 */
}

原理：flex容器（#outer-div）会自动将子元素（两个inner-div和span）排列在同一主轴上，即使span文本过长，也会保持在同一行（超出容器宽度的部分会溢出显示），不会被挤到下一行。

方案2：浮动元素调整（兼容旧浏览器） #

如果需要兼容不支持flex的旧浏览器，可以通过调整浮动属性来实现：

#outer-div { 
  border: 1px dashed red; 
  line-height: 50px; 
  width: 350px; 
  overflow: hidden; /* 闭合浮动，避免父元素高度塌陷 */
}

.inner-div { 
  border: 1px dashed red; 
  float:left; 
  height: 50px; 
  width:80px; 
}

#title { 
  float: left; /* 让span也浮动，和左侧div在同一行 */
  white-space: nowrap; /* 强制文本不换行 */
  line-height: 50px; /* 保持垂直居中 */
  margin-left: 10px; /* 可选间距 */
}

原理：让span也成为浮动元素，三个浮动元素会依次排列在同一行，white-space: nowrap确保文本不换行，overflow: hidden用来清除浮动，避免父元素高度塌陷。

两种方案都能实现你要的效果：span文本不换行，且不会被移到新行，完全用CSS完成。

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