停止 table 单元格内容在内部 <small> 元素上换行

Question

我正在尝试阻止 <td> 内容换行。 Table 单元格包含两个数字：值及其百分比。第二个数字应该更小，并与第一个数字保持恒定距离（无论值是什么），因此所有数字都将更好地对齐以提高可读性。

它有效，但是当调整大小时 window 在某些时候单元格内容开始换行，并且 <small> 内容被放入新行。

我希望浏览器将两个数字、整个单元格内容视为一个整体文本。

除了 <small class="text-muted fixed-width-45px"> 之外，我也会对任何其他解决方案感到满意，这将有助于使小数字与大数字保持恒定距离，同时解决包装问题。

我用Bootstrap3.

<td class="text-right">123,00<small class="text-muted fixed-width-45px">(23%)</small></td>

CSS 用于两个数字之间的恒定距离：

.fixed-width-45px {
    width: 45px;
    display: inline-block;
}

Answer 1

将 white-space: nowrap 添加到 table 单元格。