以全宽显示子div

Question

我有一个包含多个跨度的容器，但问题是内部容器无法以全宽显示（jsfiddle）：

test <span class="total">45
    <span class="preview">
        <span class="upc">7 carrots</span>
        <span class="edc">14 nuts</span>
        <span class="poc">21 apples</span>
    </span>
</span>

CSS：

.total {
    position: relative;
}
.edc, .upc, .poc {
    position: absolute;
    background-color: #74BDDB;
}
.upc {
    top: -1.2em;
    left: 5px;
}
.edc {
    top: 1.7em;
    left: 5px;
}
.poc {
    top: 0.3em;
    left: 100%;
}

我尝试通过定义内跨（click）的绝对宽度来解决它，但它有两个缺点。首先，我有不需要的跨度填充，内容较短（“坚果”），其次，当数字变大时我再次换行，所以使用绝对宽度不是解决方案。我该怎么办？

Answer 1

将white-space: nowrap添加到.edc, .upc, .poc {}。

Working Fiddle