twitter-bootstrap 如何避免在带有文本和右浮动标签的 td 中进行文本换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18709418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to avoid text wrapping in a td with text and a right-floated label
提问by kenwarner
<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;
}
at most screen sizes, this looks something like
在大多数屏幕尺寸下，这看起来像
at small screen sizes (and with sufficiently larger real text), this looks like
在小屏幕尺寸（和足够大的真实文本），这看起来像
note the wrapping on the left column. how can I force the left column to not wrap?
注意左栏的包装。如何强制左列不换行？
回答by Simon Cateau
You need to define a min-width property for your with the class nowrap, like so:
您需要使用类 nowrap 为您定义一个 min-width 属性，如下所示：
td.nowrap {
min-width: 129px;
}
The 129px value was calculated for your fiddle example.
129px 值是为您的小提琴示例计算的。
Since content inside the table might change, the best way (maybe not the "cleanest" one though) to do this is calculating the required min width of the td at page load and set the min-width value then.
由于表格内的内容可能会发生变化，因此最好的方法（虽然可能不是“最干净”的）是在页面加载时计算所需的 td 最小宽度，然后设置最小宽度值。
In your example Bootstrap makes the first 's width at 300px, so it's quite complex to calculate. I will try to get a jQuery example ready for you later today.
在您的示例中，Bootstrap 将第一个的宽度设为 300px，因此计算起来非常复杂。我将在今天晚些时候尝试为您准备一个 jQuery 示例。
回答by John Warthman
Try moving the span text into a second column (adjusting your styles so that it still appears as one column, and the header to span both columns). The first column then pulls left while the second pulls right, and no wrapping can occur as long as both have the text-nowrap class (or an equivalent).
尝试将跨度文本移动到第二列（调整您的样式，使其仍然显示为一列，标题跨越两列）。然后第一列向左拉，而第二列向右拉，只要两者都具有 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>
