如何在行内文本溢出显示省略号后保留后续文本？

问题场景 #

固定宽度的.content容器中，.mainText是动态文本，.secText是固定文本，需要实现无论.mainText内容长短，.secText始终显示在.mainText后方；当.mainText过长时自动截断显示省略号，最终效果为|Test looo...(5)|，而非当前的|Test loooooo...|。

解决方案 #

通过Flex布局即可实现，核心逻辑是让.mainText占据容器剩余宽度并处理溢出省略，.secText保持自身宽度不被挤压：

CSS 修改要点 #

• 给.content添加display: flex，启用弹性布局
• 给.mainText设置flex: 1，让它占据容器除.secText外的所有剩余宽度；同时单独配置溢出截断样式，确保过长时自动显示省略号
• 给.secText设置white-space: nowrap，避免文本换行被挤压

完整代码 #

CSS 代码

.content {
  width: 120px;
  border: 1px solid black;
  display: flex; /* 启用flex布局 */
}

.mainText {
  color: blue;
  flex: 1; /* 占据容器剩余宽度 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* 过长时显示省略号 */
}

.secText {
  color: red;
  white-space: nowrap; /* 防止文本换行 */
  margin-left: 4px; /* 可选：增加和主文本的间距 */
}

HTML 代码

<div class="content">
  <span class="mainText">Test looooooooooooong </span>
  <span class="secText">(5)</span>
</div>

效果说明 #

• 当.mainText内容较短时，.secText会紧跟在主文本后方
• 当.mainText内容超出容器剩余宽度时，主文本自动截断显示省略号，.secText始终保持显示在末尾

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