求助：CSS实现仅最后动态行内元素显示Ellipsis，公司名需完整

嘿，这个需求我太熟了！之前用max-width确实会踩坑，毕竟公司名称长度不固定，根本没法硬算描述的可用宽度。试试Flexbox方案，完全适配动态内容，保证公司名完整、描述占满剩余空间且超长时自动省略：

HTML结构 #

<div class="content-container">
  <span class="company">动态生成的公司名称</span>
  <span class="desc">这里是可能非常长的动态描述文本，当内容超过容器剩余宽度时，会自动显示省略号，绝对不会挤换行或者压缩公司名称</span>
</div>

CSS样式 #

.content-container {
  width: 310px;
  display: flex;
  white-space: nowrap; /* 强制所有内容在一行展示 */
  /* 下面的边框是为了直观看到容器范围，实际项目可以删掉 */
  border: 1px solid #e0e0e0;
  padding: 4px 8px;
}

.company {
  flex-shrink: 0; /* 核心属性！禁止公司名称被压缩，确保完整显示 */
  margin-right: 10px; /* 给公司名和描述之间加个小间距，提升可读性 */
  font-weight: 500; /* 可选，突出公司名 */
}

.desc {
  flex: 1; /* 自动占满容器剩余的所有宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 保证描述文本不换行 */
}

为什么这个方案可行？ #

• flex-shrink: 0 直接锁定了公司名称的宽度，无论描述多长，都不会挤压公司名的空间，确保它完整显示；
• flex: 1 让描述文本自动填充容器剩下的所有宽度，完全不用手动计算max-width，完美适配动态的公司名称长度；
• 配合 overflow: hidden 和 text-overflow: ellipsis，就能实现超长文本的省略效果，同时 white-space: nowrap 保证所有内容都在一行。

亲测这个方案比ul-li或者硬设max-width靠谱多了，不管公司名是两个字还是十几个字，都能完美适配~

内容的提问来源于stack exchange，提问作者curious.netter