如何避免在带有文本和右浮动标签的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所需的最小宽度，然后设置最小宽度值。

在你的例子中，Bootstrap将第一个宽度设置为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>