Bootstrap 4：当按钮文本超出剩余空间时，防止div跳到新行

Question

我正在用Bootstrap 4创建一个导航栏，该导航栏将由左上方的徽标和右上方的用户按钮组成，这些按钮必须将徽标中的剩余空间占用，并且不应使按钮容器div跳转当文本的长度超过可用空间时，移到新行，而是在文本上加上省略号（切换图标不应该消失，省略号应仅影响文本），但应将按钮（现已调整大小）与徽标保持在同一行上

然后，第二行上会有一个菜单（一些导航栏链接）以及一个语言选择器下拉菜单，但这是另一个主题，我仅将其作为参考。

在图像中，您不仅可以看到该按钮正在跳到新行，而且当我期望将宽度调整为文本时，该按钮也将采用100％的宽度。

在下一张图片中，您可以或多或少地看到我想要实现的目标，而我说“或多或少”是因为我无法实现目标，但它有问题，您看不到按钮切换器图标，如果单击它，则下拉菜单均不会出现。但是您可以看到省略号和文本被截断了。

.nav-item {
  text-align: right;
}

.selectpicker {
  font-size: 24px !important;
}


/* *** */

.flex-parent {
  display: flex;
  align-items: center;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.short-and-fixed {
  white-space: nowrap;
}

.long-and-truncated-with-child {
  flex: 1;
}

.long-and-truncated-with-child-corrected {
  flex: 1;
  min-width: 0;
  /* or some value */
}

<div class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container" style="border: 1px solid #fff">
    <!-- Brand -->
    <div class="col-* pl-0 pr-0 mr-2" style="border: 1px solid red">
      <a class="navbar-brand mr-0" href="{{cirsaApp.cirsaWebsiteUrl}}" target="_blank" style="border: 1px solid #fff">
        <img src="http://whatson.ae/dubai/wp-content/uploads/2016/08/img-world-of-adventure-10.jpg" />
      </a>
    </div>

    <div class="col pr-0 pl-0 text-truncate" style="border: 1px solid red; ">
      <!-- User menu -->
      <div class="dropdown flex-parent" style="border: 1px solid #fff; " *ngIf="(isLoggedIn | async)">
        <button type="button" class="btn btn-success dropdown-toggle long-and-truncated" data-toggle="dropdown" id="userDropdown">
              {{userName | async}}
            </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
          <div class="dropdown-divider"></div>
          <a [routerLink]="['/login']" class="dropdown-item">Logout</a>
        </div>
      </div>
    </div>
  </div>
</div>

我希望有人可以帮助我。预先感谢。