Css 文本中有空格时如何防止换行

我有这个代码来显示类别名称。当两个单词之间有空格时，我对单词包装有问题

以下是CSS：

.post-item .cat {
height: 25px;
display: inline-block;
background: #CC0000;
font-size: 11px;
padding-left: 10px;
color: #FFF;
line-height: 23px;
position: relative;
float: right;
margin-left: 10px;
margin-top: 10px;
}

它在两行上显示类别名称

我希望文本在一行中，如下所示：

picture news

picture
  new

不是这样的：

picture news

picture
  new

例：

也许：

.dont-break-the-line {
    white-space: nowrap;
}

---

请参阅。

.picture、.news{…}

？@user3915307您是否尝试过简单地增加容器的宽度（

.post item.cat

）以适应文本？我尝试过，但当我有word like（sport cat）时，宽度大于文本的背景，因此我需要句子以及合适的胶带