gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 15:08:38 25 4
gpt4 key购买 nike

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

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

desired

在小屏幕尺寸下(以及足够大的真实文本),这看起来像

boo wrapping

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

最佳答案

您需要使用 nowrap 类为您定义一个最小宽度属性,如下所示:

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

129px 值是为您的 fiddle 示例计算的。

由于表格内的内容可能会发生变化,因此最好的方法(虽然可能不是“最干净”的方法)是在页面加载时计算 td 所需的最小宽度,然后设置最小宽度值。

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

关于html - 如何避免文本在带有文本和右浮动标签的 td 中换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18709418/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com