元素在内容过宽时整体换行而非截断或溢出
" />
当多个内联 `` 元素（例如 bootstrap 的徽章）并排显示时，若其中一个内容较长（如“joe bloggs brother”），浏览器默认会尝试在单词内或空格处折行，导致视觉错乱——部分文字挤到下一行、与其他徽章错位。这并非预期行为，尤其在移动端窄屏场景下更明显。解决核心在于：**不让单个 `` 折行，而是让它“整体换行”**。
要实现这一效果，Bootstrap 5 提供了开箱即用的工具类 text-nowrap，它等价于 CSS 的 white-space: nowrap，可阻止元素内部换行，并配合父容器的 display: inline-block 或默认流式布局，使该 <span> 在空间不足时自动整体移至下一行，带动相邻徽章重新排列。
✅ 正确用法示例：
<!-- 父容器建议使用 d-flex 或普通 block 容器 -->
<div class="d-flex flex-wrap gap-1">
<span class="badge bg-primary rounded-pill text-nowrap">
{{ displayusernames(user.names) }}
</span>
<span class="badge bg-secondary rounded-pill text-nowrap">
Joe Bloggs Brother
</span>
<span class="badge bg-success rounded-pill text-nowrap">
Admin
</span>
</div>⚠️ 注意事项：
- text-nowrap 必须作用于每个需要“整块换行”的 <span> 上，不能只加在某一个上；
- 父容器需支持换行行为：推荐使用 d-flex flex-wrap（最灵活）、或 d-grid、或普通 div（依赖默认文档流）；
- 避免同时设置 white-space: nowrap 和固定宽度（如 w-100），否则可能触发水平滚动或溢出；
- 若需响应式控制（如仅在小屏启用换行），可结合 text-nowrap text-sm-normal 等断点类。
? 小结：text-nowrap 不是“让文字不换行”，而是“让整个内联元素拒绝被拆分”，从而在布局受限时以整体为单位参与换行计算——这是实现徽章组自适应换行的关键逻辑。
