CSS 溢出：隐藏和显示：无有什么区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/132649/
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
What is the difference between overflow:hidden and display:none
提问by user21067
What is the difference between overflow:hidden and display:none?
溢出：隐藏和显示：无有什么区别？
回答by PhiLho
Example:
例子：
.oh
{
height: 50px;
width: 200px;
overflow: hidden;
}
If text in the block with this class is bigger (longer) than what this little box can display, the excess will be just hidden. You will see the start of the text only.
如果具有此类的块中的文本比这个小框可以显示的更大（更长），则多余的将被隐藏。您将只看到文本的开头。
display: none;will just hide the block.
display: none;只会隐藏块。
Note you have also visibility: hidden;which hides the content of the block, but the block will be still in the layout, moving things around.
请注意，您还有visibility: hidden;which 隐藏了块的内容，但该块仍将在布局中，四处移动。
回答by ConroyP
display: noneremoves the element from the page, and the flow of the page acts as if it's not there at all.
display: none从页面中删除元素，页面流就像它根本不存在一样。
The CSS
overflow: hiddenproperty can be used to reveal more or less of an element based on the width of the browser window.
CSS
overflow: hidden属性可用于根据浏览器窗口的宽度显示更多或更少的元素。
回答by ConroyP
Overflow:hidden just says if text flows outside of this element the scrollbars don't show. display:none says the element is not shown.
溢出：隐藏只是说如果文本流到这个元素之外，滚动条就不会显示。display:none 表示元素未显示。
回答by Paul D. Waite
By default, HTML elements are as tall as required to contain their content.
默认情况下，HTML 元素与包含其内容所需的高度一样高。
If you give an HTML element a fixed height, it may not be big enough to contain its content. So, for example, if you had a paragraph with a fixed height and a blue background:
如果你给一个 HTML 元素一个固定的高度，它可能不足以包含它的内容。因此，例如，如果您有一个具有固定高度和蓝色背景的段落：
<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we're going to give it a blue background and a fixed height. If we add overflow: hidden, we won't see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>
p {
background-color: #ccf;
height: 20px;
}
The text within the paragraph would extend beyond the bottom edge of the paragraph.
段落中的文本将超出段落的底部边缘。
The overflowproperty allows you to change this default behaviour. So, if you added overflow: hidden:
该overflow属性允许您更改此默认行为。所以，如果你添加overflow: hidden：
p {
background-color: #ccf;
height: 20px;
overflow: hidden;
}
Then you wouldn't see any of the text beyond the bottom edge of the paragraph. It would be clipped to the fixed height of the paragraph.
然后您将看不到段落底部边缘以外的任何文本。它将被剪辑到段落的固定高度。
display: nonewould simply make the entire paragraph (visually) disappear, blue background and all, as if it didn't appear in the HTML at all.
display: none只会让整个段落（视觉上）消失，蓝色背景等等，就好像它根本没有出现在 HTML 中一样。
回答by Ian
Simple example of overflow: hidden http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden
溢出的简单例子：隐藏http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden
If you edit the CCS on that page, you can see the difference between the overflow attributes (visible | hidden | scroll | auto ) - and if you add display: none to the css, you will see the whole content block is disappears.
如果您在该页面上编辑 CCS，您可以看到溢出属性之间的差异（可见 | 隐藏 | 滚动 | 自动） - 如果您向 css 添加 display: none ，您将看到整个内容块都消失了。
Basically it's a way of controlling layout and element "flow" - if you are allowing user input (from a CMS field say), to render in a fixed sized block, you can adjust the overflow attribute to stop the box increasing in size and therefore breaking the layout of the page. (conversely, display: none prevents the element from displaying and therfore the entire page re-adjusts)
基本上它是一种控制布局和元素“流动”的方式 - 如果您允许用户输入（例如来自 CMS 字段）以固定大小的块呈现，您可以调整溢出属性以阻止框的大小增加，因此破坏页面布局。（相反， display: none 阻止元素显示，因此整个页面重新调整）
回答by Ian
overflow: hidden - hides the overflow of the content, in contrast with overflow: auto who shows scrollbars on a fixed sized div where it's inner content is larger than it's size
溢出：隐藏 - 隐藏内容的溢出，与溢出相反：自动谁在固定大小的div上显示滚动条，其中内部内容大于其大小
display: none - hides an element and it completely doesn't participant in content layout
display: none - 隐藏一个元素，它完全不参与内容布局
P.S. there is no difference between the two, they are completely unrelated
PS 两者没有区别，完全没有关系
回答by Vincent McNabb
Let's say you have a divthat measures 100 x 100px
假设您有一个div尺寸为 100 x 100px 的
You then put a whole bunch of text into it, such as it overflows the div. If you use overflow: hidden;then the text that fits into the 100x100 will not be displayed, and will not affect layout.
然后你把一大堆文本放进去，比如它溢出了div。如果使用，overflow: hidden;则适合 100x100 的文本将不会显示，并且不会影响布局。
display: noneis completely different. It renders the rest of the page as ifif the divwas still visible. Even if there is overflow, that will be taken into account. It simply leaves space for the div, but does not render it. If both are set: display: none; overflow: hidden;then it will not be displayed, the text will not overflow, and the page will be rendered as if the invisible divwere still there.
display: none是完全不同的。它呈现页面的其余部分，就好像它div仍然可见一样。即使有溢出，也会被考虑在内。它只是为 留出空间div，但不会渲染它。如果两者都设置：display: none; overflow: hidden;则不会显示，文本不会溢出，并且页面将呈现为好像隐形div还在那里。
In order to make the divnot affect the rendering at all, then both display: none; overflow: hidden;should be set, and also, do something such as set height: 0;. Or with the width, or both, then the page will be rendered as if the div did not exist at all.
为了使div完全不影响渲染，display: none; overflow: hidden;则应设置两者，并执行诸如 set 之类的操作height: 0;。或者使用width，或两者兼而有之，那么页面将被呈现，就好像 div 根本不存在一样。
回答by kemiller2002
display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. Overflow hidden means that the tag is rendered with a certain height and any text etc which would cause the tag to expand to render it will not display. I think what you mean to ask is visibility:hidden. This means that unlike display none, the tag is not visible, but space is allocated for it on the page. so for example
display:none 意味着有问题的标签根本不会出现在页面上（尽管你仍然可以通过 dom 与它交互）。其他标签之间不会为它分配空间。溢出隐藏意味着标签以一定的高度呈现，任何会导致标签展开以呈现它的文本等都不会显示。我认为您要问的是可见性：隐藏。这意味着与 display none 不同，该标签不可见，但会在页面上为其分配空间。所以例如
<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>
display:none would be:
显示：无将是：
test | | test
测试 | | 测试
visibility:hidden would be:
可见性：隐藏将是：
test | | test
测试 | | 测试
In visibility:hidden the tag is rendered, it just isn't seen on the page.
在visibility:hidden 标签被渲染，它只是在页面上看不到。
