[英]How to avoid text wrapping in a td with text and a right-floated label
<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定义一个min-width属性,如下所示:
td.nowrap {
min-width: 129px;
}
129px值是为您的小提琴示例计算的。
由于表中的内容可能会发生变化,因此最好的方法(可能不是“最干净的”)是在页面加载时计算td所需的最小宽度,然后设置最小宽度值。
在你的例子中,Bootstrap将第一个宽度设置为300px,因此计算起来非常复杂。 我将尝试在今天晚些时候为您准备一个jQuery示例。
尝试将范围文本移动到第二列(调整样式,使其仍显示为一列,标题跨越两列)。 然后第一列向左拉,而第二列向右拉,只要两者都具有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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.