使用text-truncate时如何显示被隐藏的span元素内容？

Bootstrap的text-truncate类是对容器内所有内容整体做单行截断，所以当你的状态标签<span>In Progress</span>跟在长文本后面时，会被一同截断隐藏。要实现「文本截断后末尾保留状态标签」的效果，可通过以下两种方案解决：

方案一：Flex布局拆分文本与状态标签 #

调整结构，将长文本和状态标签拆分为两个独立元素，利用Flex布局让文本占据剩余空间并单独截断，状态标签固定在末尾。

<h5 class="d-flex align-items-center">
  <span class="text-truncate flex-grow-1">Birthday Song Birthday Song Birthday Song Birthday Song</span>
  <span class="ms-2">In Progress</span>
</h5>

• d-flex将h5转为弹性容器，align-items-center保证文本与标签垂直居中
• flex-grow-1让文本容器占满剩余宽度，text-truncate仅作用于长文本部分
• ms-2给状态标签添加左侧间距，避免与截断文本紧贴

方案二：绝对定位固定状态标签位置 #

不改变原有结构，通过绝对定位将状态标签固定在容器右侧，同时给容器预留足够的右侧内边距避免文本被标签遮挡。

<h5 class="text-truncate position-relative" style="padding-right: 80px;">
  Birthday Song Birthday Song Birthday Song Birthday Song
  <span class="position-absolute end-0 top-50 translate-middle-y">In Progress</span>
</h5>

• position-relative给h5设置相对定位基准
• padding-right: 80px预留状态标签的显示空间（可根据标签长度调整数值）
• position-absolute end-0将标签定位到容器右侧，top-50 translate-middle-y实现垂直居中

注意事项 #

• 确保h5容器有足够的宽度，否则截断逻辑无法触发
• 方案一的Flex布局更贴合Bootstrap的组件设计思路，兼容性和可维护性更好
• 若状态标签长度不固定，方案二需要动态计算并调整padding-right的数值

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