元素整体换行而不折断
" />
当多个内联 ``（如 bootstrap badge）在窄屏中因内容过长导致布局错乱时，可通过 `text-nowrap` 类强制其整体换行，避免文字截断或错位。
在响应式布局中，尤其是移动端，Bootstrap 的 badge 默认为内联元素（display: inline-flex），会尝试在同一行内尽可能排列。但当某个 badge 文本较长（如 "Joe Bloggs Brother"）时，浏览器可能将其内部文字折行（word-wrap），造成视觉割裂——例如头像旁显示一半 badge、另一半跳到下一行，破坏语义分组。
正确做法是让整个 badge 作为一个不可分割的单元参与换行计算，而非允许其内部折行。Bootstrap 5 提供了现成的工具类 text-nowrap，它等价于 CSS 的 white-space: nowrap，可阻止元素内文本换行，并促使父容器在空间不足时将该 整体推至下一行。
✅ 推荐写法（结合你的模板）：
<span class="UserNameBadges badge bg-primary rounded-pill text-nowrap">
{{ displayusernames(user.names) }}
</span>⚠️ 注意事项：
- text-nowrap 作用于元素自身，不影响兄弟元素的换行逻辑；若需多个 badge 协同换行（如“全挤不下就一起换行”），应将它们包裹在具有 display: flex; flex-wrap: wrap 的容器中，并为每个 badge 添加 flex-shrink: 0 防止压缩；
- 避免滥用：过长的 badge 可能撑破容器，建议配合 max-width 或服务端截断（如 {{ displayusernames(user.names)|truncate(12) }}）提升体验；
- 不要使用 white-space: pre（如答案中误提）——它保留所有空白符且不换行，易引发横向溢出，与目标相悖。
总结：text-nowrap 是解决内联 badge 换行断裂问题最轻量、标准且兼容性最佳的方案。它让 badge “要么整块显示，要么整块下移”，确保用户信息的视觉完整性与可读性。
