如何实现容器宽度不足时仅在两个span间换行，公司名独占一行？

这个场景我太熟了！其实不用改HTML结构，几行CSS就能搞定你要的效果——让容器宽度足够时姓名和公司名同行，不够时姓名独占一行、公司名自动换行到下一行，不会出现姓名被拆分的情况。

核心思路 #

问题根源在于浏览器把两个<span>里的文本当成了连续的字符串，所以会在任意“允许换行”的位置拆分（比如长单词中间）。我们要做的就是告诉浏览器：姓名部分绝对不能拆分行，这样容器宽度不够时，浏览器只能把公司名挤到下一行。

具体实现方案 #

方案1：基础CSS（无需布局变更）

给姓名的<span>添加white-space: nowrap属性，强制它不换行：

<div class="container">
  <span class="name">Some Verylongname</span>
  <span class="company">Company</span>
</div>

/* 容器可以根据需求设置宽度，比如测试时加个max-width */
.container {
  max-width: 160px;
  border: 1px solid #eee; /* 方便看容器范围 */
}

.name {
  white-space: nowrap; /* 关键：姓名部分不允许换行 */
  margin-right: 6px; /* 可选：给姓名和公司名加个空格，视觉更友好 */
}

方案2：Flex布局（更灵活）

如果需要更精细的对齐控制，用Flex布局也能实现，而且兼容性很好：

.container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  max-width: 160px;
  border: 1px solid #eee;
  align-items: center; /* 可选：让两行文本垂直居中 */
}

.name {
  flex-shrink: 0; /* 禁止姓名被压缩 */
  margin-right: 6px;
}

效果说明 #

• 当容器宽度足够容纳姓名+公司名时，两者会在同一行显示；
• 当容器宽度不够时，因为姓名被强制不能拆分，浏览器只能把公司名推到下一行，完美实现你要的“姓名独占上行、公司名独占下行”的效果。

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