CSS:如何在没有换行符和溢出的情况下将一小组单词放在一起

Question

我有一个标签列表，这些标签需要彼此相邻显示，如果从盒子里流出，则移动到下一行。 这些标签('test completed', 'test ongoing',...),有空格，我想将整个标签文本保留在一行上(标签中间没有中断(。

我试图将标签显示为带有white-space: nowrap;的跨度，但随后它开箱即用！

所以基本上我需要标签内的white-space: nowrap，但标签周围的正常中断。

这可能吗？

Answer 1

在没有看到代码的情况下，我会尝试在您的标签周围放置一个父容器，以便您可以显示所有内容inline-block并确保元素的宽度足够大：

.parent span{
display: inline-block;
white-space: nowrap; 
width: auto;
}

<div class="parent">
<span>test completed</span>
<span>test ongoing</span>
<span>another test</span>
</div>

Answer 2

不确定我是否正确理解你，但它应该可以工作，也许已经重载了另一个 css 规则，看看：

div {
width: 360px;
background: #f00;
margin: 10px;
line-height: 1.6em;
white-space: initial;
}
.tag {
background: #000;
color: #fff;
margin: 0 2px;
padding: 0 3px;
border: solid 2px green;
white-space: nowrap;
line-height: 1.2em;
height: 1.2em
}

<div>
<span class="tag">adx cvxc bbgdfg </span>
<span class="tag">adadxcz cvxc bbgdfg </span>
<span class="tag">adadxcz cvxc bbgdfg </span>
<span class="tag">adadxcz cvxc bbgdfg </span>
</div>