html - 如何避免在带有文本和右浮动标签的 td 中换行

Question

http://jsfiddle.net/a2kvU/

<table class="table table-bordered table-condensed">
    <tbody>
        <tr><td class="nowrap">abc def ghi jkl<span class="label label-info pull-right">123</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
        <tr><td class="nowrap">abc def ghi<span class="label label-info pull-right">456</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
        <tr><td class="nowrap">abc def<span class="label label-info pull-right">789</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
        <tr><td class="nowrap">abc<span class="label label-info pull-right">1000</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
    </tbody>
</table>

.nowrap {
    white-space: nowrap;
}

在大多数屏幕尺寸下，这看起来像

在小屏幕尺寸（以及足够大的真实文本）下，这看起来像

注意左列的换行。如何强制左列不换行？

Answer 1

您需要使用类 nowrap 为您定义一个 min-width 属性，如下所示：

td.nowrap {
  min-width: 129px;
}

为您的小提琴示例计算了 129px 值。

由于表格内的内容可能会发生变化，因此最好的方法（尽管可能不是“最干净”的方法）是计算页面加载时 td 所需的最小宽度，然后设置 min-width 值。

在您的示例中，Bootstrap 将 first 的宽度设为 300px，因此计算起来非常复杂。今天晚些时候，我将尝试为您准备一个 jQuery 示例。

Answer 2

尝试将跨度文本移动到第二列（调整样式以使其仍显示为一列，并且标题跨越两列）。然后第一列向左拉，而第二列向右拉，只要两者都具有 text-nowrap 类（或等效类），就不会发生换行。

<td class="nowrap norightborder">abc def ghi jkl</td><td class="nowrap noleftborder"><span class="label label-info pull-right">123</span></td>