white-space:nowrap 导致内容超出单元格答案

【问题标题】：white-space:nowrap causes contents to go outside cellwhite-space:nowrap 导致内容超出单元格
【发布时间】：2015-01-29 21:45:00
【问题描述】：

我有一个 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 文本会延伸到表格之外。我没有在任何地方声明表格的宽度。

【问题讨论】：

当您说white-space:nowrap 时，您的结果完全反映了应该发生的情况 - 如果没有空格分隔标记/单词，则文本不会换行。你也可以在<td> 中发布数据吗？
@Brian，我首先将结束标签更改为</th> 现在你有<th> ... </td> 我不认为它会解决你的问题，但它不会有什么坏处把它改正.
bugzilla.mozilla.org/show_bug.cgi?id=488725

标签： html css

【解决方案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 正常运行。

【讨论】：

谢谢，但表格宽度不固定
啊，在您发布代码之后，它更有意义了。我更新了我的答案。如果您对我提出的解决方案还有其他问题，请询问。

【解决方案2】：

编辑：起初误解了你的问题。

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

【讨论】：

【解决方案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 实体 &thinsp;，这是一个很薄的空间。但是，它会在您的 html 输出中引入一些额外的空间。

【讨论】：