如何使文本溢出省略号在浮动范围内有效

Question

这是与this other post类似的问题，但略有不同。

我目前有一个li，里面有一个标题。标题旁边是填充的类别类型。我将范围中的类别类型设置为向右浮动。因此，它们如下所示。

当我缩小屏幕时，标题会变成省略号，而跨度中的类别类型会换行。

理想情况下，我希望跨度中的类别类型与标题保持在同一行，并在标题变为省略号之前转到省略号。

这是当前的标记和样式：

.list-group-item {
  margin: 0 0 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-categories {
  color: gray;
  float: right;
  min-width: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">


<li class='list-group-item'>
  Title
  <span class='item-categories'>category type</span>
</li>