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

【问题标题】：How to avoid text wrapping in a td with text and a right-floated label如何避免在带有文本和右浮动标签的 td 中换行
【发布时间】：2015-11-07 02:13:52
【问题描述】：

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;
}

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

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

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

【问题讨论】：

如果您的真正目标确实是将浮动元素保持在右上角，您可以简单地删除您的 nowrap 类并在文本之前声明您的浮动元素。见jsfiddle.net/g8y5eqw2
见stackoverflow.com/questions/26388593/…

标签： html css twitter-bootstrap twitter-bootstrap-3 nowrap

【解决方案1】：

你需要为你的类 nowrap 定义一个 min-width 属性，像这样：

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

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

由于表格内的内容可能会改变，最好的方法（虽然可能不是“最干净”的方法）是计算页面加载时所需的 td 最小宽度，然后设置最小宽度值。

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

【讨论】：

这是一个使用 jQuery 动态完成技巧的小提琴：jsfiddle.net/a2kvU/15

【解决方案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>

【讨论】：