html - HTML/CSS：使用“空白：正常”后如何避免额外的空白

Question

我有一个简单的表格，在每一行中，我有多个跨度标签。每个跨度可以有不同长度的文本（我只是在这里展示结构）：

.label {

  float: left;
  text-transform: uppercase;
  font-size: 12px;
  padding: 0.6em 1em;
  /*display: inline;
  padding: .2em .6em .3em;
  font-size: 80%;*/
  font-weight: normal;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  margin-right: 5px;
  margin-bottom: 5px;
}

.label-default2
{
    background-color:#e8e8e8;
    color: #888;
}

    .label-default2[href]:hover,
    .label-default2[href]:focus
    {
        background-color: #777;
    }
    
.top2 {
    margin-top: 2px;
}

.left {
  float:left;
}

<table>
	<tbody>
		<tr>
			<small class="left top2">
				<span class="label label-default2" style='white-space:normal; text-align:left;word-break:break-word;'>
					Cura - Mlrettet SOSU-Helper
				</span>
			</small>
			<small class="left top2">
				<span class="label label-default2" style='white-space:normal; text-align:left;word-break:break-word;'>
					Cura - Guided Borgerkonsulent og Visitator
				</span>
			</small>
		</tr>
	</tbody>
</table>

我几乎得到了我想要的结果，即如果文本很大，则将文本移动到新行。我唯一的问题是现在我得到了一些额外的空白（在灰色区域），如屏幕截图所示：

我希望它是这样的：

有什么办法可以摆脱多余的白色吗？提前致谢