如何避免包含文本和右浮标签的td中的文本换行
如何避免包含文本和右浮标签的td中的文本换行
提问于 2013-09-10 09:24:28
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;
}在大多数屏幕大小下，这看起来像这样
在小屏幕尺寸(以及足够大的真实文本)下，这看起来像
请注意左列上的换行。如何强制左列不换行？
回答 2
Stack Overflow用户
发布于 2013-09-10 18:29:49
您需要使用类nowrap为定义一个最小宽度属性，如下所示：
td.nowrap {
min-width: 129px;
}129px值是为您的小提琴示例计算的。
由于表中的内容可能会更改，因此最好的方法(可能不是最“干净”的方法)是计算页面加载时td所需的最小宽度，然后设置最小宽度值。
在你的例子中，Bootstrap把第一个的宽度设为300px，所以计算起来相当复杂，今天晚些时候我会试着给你准备一个jQuery的例子。
Stack Overflow用户
发布于 2015-11-07 02:13:53
尝试将跨度文本移动到第二列中(调整样式，使其仍显示为一列，并将标题显示为跨两列)。然后，第一列向左拉，第二列向右拉，只要两者都有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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18709418
复制相关文章
相似问题
腾讯云开发者
