您应该添加一个包含white-space: pre的自定义类。这将使一个元素不换行，而是完全移动到一个新行。它的Bootstrap-5类是text-nowrap：

div {
  border: 2px dashed red;
  width: 7em;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div>
  <span>0 1 2 3 4</span>
  <span class="text-nowrap">5 6 7 8 9</span>
</div>

要做到这一点，你可以使用这个CSS：

.UserNameBadges {
  word-break: break-all;
  display: inline-block;
  max-width: 150px;
}

显示屏：inline-block“属性使"”元素的行为类似于能够设置width和height属性的内联元素。“max-width：150 px“属性为"”元素设置150像素的最大宽度，因此，如果其中的文本超过此宽度，它将换到下一行。" word-break：“break-all”属性确保文本在到达容器末尾时自动换行。

我是在css里面做这个的，我把它做成这样，当显示变得很小时，我把span显示为一个块，并适合内容。
看上去是这样的：

@media (max-width:660px)  {
    .UserNameBadges {
        display: block;
        width: fit-content;
    }

}