元素在内容过宽时整体换行（而非内部折行）
" />
当多个内联 `` 元素（如 bootstrap 徽章）并排显示时，若其中某个内容过长导致布局错乱，可通过 `white-space: nowrap` 阻止其内部折行，并配合父容器的换行策略，实现“整块换行”效果。
在响应式布局中，尤其是移动端，Bootstrap 的 .badge 默认为 display: inline-block，且内容较长的徽章（如 "Joe Bloggs Brother"）可能因宽度超出容器而被强制内部折行（如 Joe Bloggs<br>Brother），破坏视觉一致性，也影响兄弟元素的对齐逻辑。
要解决这个问题，关键在于确保每个 <span> 作为一个不可分割的视觉单元参与换行——即：不拆分单词或文本，而是整个徽章整体移至下一行。Bootstrap 5 提供了现成的工具类 .text-nowrap，它等价于 CSS 的 white-space: nowrap，可直接应用在徽章上：
<!-- 推荐：为每个 badge 添加 text-nowrap -->
<span class="badge bg-primary rounded-pill text-nowrap">
{{ displayusernames(user.names) }}
</span>
<span class="badge bg-secondary rounded-pill text-nowrap">
{{ user.relationship }}
</span>同时，请确保父容器支持弹性换行（默认已满足）。若仍出现异常，可显式添加 .d-flex.flex-wrap 或包裹在 <div class="d-inline-flex flex-wrap"> 中以强化换行行为。
⚠️ 注意事项：
- 不要对父容器设置 white-space: nowrap，否则所有子元素将强制单行显示，失去换行能力；
- 避免混用 float 或绝对定位，会破坏内联流式布局逻辑；
- 若需更精细控制（如最小宽度、溢出省略），可结合 min-width: max-content 或 overflow: hidden; text-overflow: ellipsis（但需配合 display: inline-block 和固定宽度）。
总结：.text-nowrap 是最轻量、语义清晰且与 Bootstrap 生态兼容的解决方案。它让徽章“宁可整块下移，也不内部折断”，从而保障多徽章场景下的排版稳定性与可读性。
