Question

我有一个td我声明white-space:nowrap;。这可以防止文本中的换行符，但单元格大小确实考虑了丢失的换行符，并且文本超出了td。无论如何都要使单元格大小占white-space:nowrap;？

我的代码如下所示：

<tr><td style="background-color: #0C264C;color: #FFFFFF; padding: 2px; margin: 2px; white-space: nowrap;" > 

<div style="float:left; text-align:left; width:50%;">Quarter</div> 

<div style="float:right; text-align:right; width:50%;">Thousands of Employees</div>

</td></tr>

tr不会自动扩展，并且某些Thousands of Employees文本会在表外扩展。我没有在表格的任何地方声明宽度。

Answer 1

<强>更新

如果没有看到整个表格，很难判断，但nowrap，浮动元素和块元素的组合将难以实现。这些元素对元素定位都有不同的影响，并且推动了父元素的界限。

由于您已经在使用表格，因此您应该使用其内置的单元格机制，该机制应相应地适当调整表格的宽度（为简洁起见，省略了内联样式）。：

<table>
   <tr>
   <th>Quarter</th>
   <th class="right">Thousands of Employees</th>
   </tr>
   ....
</table>

然后把它放在你的CSS中：

tr th { width: 50%; white-space: nowrap }
th.right { text-align: right }

原始答案

如果您在桌面上有一个固定的宽度，并且内容不能适合td 和，而不是将表格的宽度推得更大，则内容将超出单元格

尝试删除宽度（width:auto）或在css中使用它：

#idOfYourTable {    
    min-width: 800px; /* or whatever width you originally had set */
}

然后在IE6的样式表中使用width: 800px，因为IE6的宽度无论如何都像min-width。你可能不得不玩其他一些规则来让IE6玩得很好。

Answer 2

编辑：首先误解了你的问题。

我认为如果不给你的容器一些固定的尺寸，你将无法实现你想要做的事情。黑客可能会在文本的同一行包含一些额外的伪装元素，如间隔符或白点，迫使容器将其考虑在内，但这是一个非常讨厌的黑客。

Answer 3

应该忽略html元素之间的空格。所以你拥有的是一段连续的nowrap代码。

解决这个问题的一种方法是使用unicode字符作为零宽度空间。这会破坏您的代码而不会占用额外的空间。

<div style="float:left; text-align:left; width:50%;">Quarter</div>&#8203;
<div style="float:right; text-align:right; width:50%;">Thousands of Employees</div>

如果由于某种原因你无法使用unicode代码，你可能想尝试一个稀薄空间的html实体 。但是，它会在你的html输出中引入一些额外的空间。

white-space：nowrap导致内容进入单元格之外

3 个答案: