如何避免td文本和右浮动标签的文字换行 [英] How to avoid text wrapping in a td with text and a right-floated label

问题描述

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

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

在小屏幕尺寸下（并且具有足够大的实际文本），这看起来像

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

解决方案

您需要为类定义min-width属性nowrap，像这样：

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

129px的值是根据您的小提琴示例计算的。

因为表格内的内容可能会发生变化，所以最好的方法是（也许不是最干净的），计算页面加载时td所需的最小宽度，并设置min-宽度值然后。

在您的示例中，Bootstrap首先将宽度设置为300px，因此计算起来相当复杂。我会尽量在今天晚些时候为您准备好一个jQuery示例。

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

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?

解决方案

You need to define a min-width property for your with the class nowrap, like so:

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

The 129px value was calculated for your fiddle example.

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.

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.

这篇关于如何避免td文本和右浮动标签的文字换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！