阻止表格单元格内容包裹在内部 <small> 元素上

Question

我正在尝试阻止 <td> 内容包装。表格单元格包含两个数字：值及其百分比。第二个数字应该更小，并且与第一个数字保持恒定的距离（无论值是多少），这样所有数字都会更好地对齐以提高可读性。

它可以工作，但是当调整窗口大小时，单元格内容开始换行，<small> 内容被放入新行。

我希望浏览器将这两个数字（整个单元格内容）视为一个单一的文本。

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

我使用 Bootstrap 3。

<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 添加到表格单元格中。