twitter-bootstrap 引导程序的溢出：隐藏在 div 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17740598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap's overflow:hidden in a div doesn't work
提问by da-hype
If a table's content is longer than the allowed size of my the rest will be hidden. For some reason, when i use bootstrap, it doesnt hide overflow
如果表的内容长于允许的大小，其余部分将被隐藏。出于某种原因，当我使用引导程序时，它不会隐藏溢出
my html
我的 HTML
<div id="wrapper">
<table class="tabel_basisgegevens" border="5">
<tr><td>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</td></tr>
</table>
</div>
my css
我的 CSS
.tabel_basisgegevens{
height:30px;
width: 1170px;
color:white;
background:red;
}
#wrapper {
position:absolute;
border:1px;
border-color:blue;
width: 200px;
overflow: hidden;
}
when you remove bootstrap from the "External Resources" it works fine. any idea how to fix this? Works fine on Chrome, but not on firefox 22.0.
当您从“外部资源”中删除引导程序时，它工作正常。知道如何解决这个问题吗？在 Chrome 上工作正常，但在 Firefox 22.0 上不工作。
and my alert() doesn't alert the table's width which is 1170, instead it alert's the div's width.
并且我的 alert() 不会提醒表格的宽度是 1170，而是提醒的是 div 的宽度。
回答by godfrzero
The source of the problem seems to be that firefox is ignoring your width: 1170px;on the table and using the width: 200px;on the wrapper. Adding a min-width: 1170px;to the table fixes your problem, but I can't be sure if this is acceptable without additional details.
问题的根源似乎是 firefox 忽略了您width: 1170px;在桌子上并使用width: 200px;了包装器上的 。向min-width: 1170px;表中添加 a可以解决您的问题，但如果没有其他详细信息，我无法确定这是否可以接受。
Edit:Actually, if the <td>content always has to be restricted to a single line, you can use white-space: nowrapfor the <td>and it should work properly. Tested in FF22 on a MBP.
编辑：实际上，如果<td>内容总是必须限制在一行，您可以使用white-space: nowrapfor<td>并且它应该可以正常工作。在 MBP 上的 FF22 中测试。
Edit 2:So after looking through the Bootstrap CSS file, I noticed this:
编辑 2：所以在浏览 Bootstrap CSS 文件后，我注意到了这一点：
table {
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
}
Since Bootstrap sets a max-width: 100%on tables, the browser will ignore any width you set if it's greater than the width of the tables parent element. So removing the max-width, adding a min-width, or explicitly telling your browser that you don't want line breaks using white-space: nowrapwill all fix your issue. I'd recommend just removing the max-widthfrom Bootstrap if you don't need it.
由于 Bootstrapmax-width: 100%在表格上设置了 a ，如果它大于表格父元素的宽度，浏览器将忽略您设置的任何宽度。因此，删除max-width、添加min-width或明确告诉浏览器您不希望使用换行符white-space: nowrap都可以解决您的问题。max-width如果您不需要它，我建议您从 Bootstrap 中删除它。
Anyway, this still leaves the question of why Firefox and Chrome behave differently when given the same content. While looking into this, I saw this SO question, which explains why it seemed like the max-widthwas ignored by Chrome.
无论如何，这仍然留下了为什么 Firefox 和 Chrome 在给定相同内容时表现不同的问题。在研究这个时，我看到了这个 SO question，这解释了为什么它似乎max-width被 Chrome 忽略了。
From the W3C Specification for Tables:
来自W3C 表格规范：
In terms of the visual formatting model, a table can behave like a block-level (for 'display: table') or inline-level (for 'display: inline-table') element.
就视觉格式化模型而言，表格的行为类似于块级（对于“display: table”）或内联级（对于“display: inline-table”）元素。
Checking out the User Agent styles for Chrome and FF, they both add a display: table. So strictly following the specs, the overflow: hiddenshould be failing in both browsers. Looks like in this case, Chrome is misinterpreting the specs slightly, while FF is strictly adhering to it.
查看 Chrome 和 FF 的用户代理样式，它们都添加了一个display: table. 所以严格遵循规范，overflow: hidden应该在两个浏览器中都失败。看起来在这种情况下，Chrome 稍微误解了规范，而 FF 则严格遵守规范。
回答by Falguni Panchal
try this
试试这个
overflow:hidden working
#wrapper {position:absolute;
border:1px solid blue;
width:200px;
overflow:hidden;
}
