溢出：隐藏和显示：无有什么区别答案

【问题标题】：What is the difference between overflow:hidden and display:none溢出：隐藏和显示：无有什么区别
【发布时间】：2008-09-25 11:11:01
【问题描述】：

overflow:hidden 和 display:none 有什么区别？

【问题讨论】：

标签： css overflow hidden

【解决方案1】：

例子：

.oh
{
  height: 50px;
  width: 200px;
  overflow: hidden;
}

如果这个类的块中的文本比这个小框可以显示的更大（更长），超出的部分将被隐藏。您只会看到文本的开头。

display: none; 只会隐藏该块。

请注意，您还有 visibility: hidden; 隐藏块的内容，但块仍将在布局中，移动东西。

【讨论】：

【解决方案2】：

display: none 将元素从页面中移除，页面的流动就好像它根本不存在一样。

@987654321@:

CSS overflow: hidden 属性可用于根据浏览器窗口的宽度显示或多或少的元素。

【讨论】：

图片？你能说元素吗？

【解决方案3】：

Overflow:hidden 只是说如果文本在此元素之外流动，则滚动条不会显示。 display:none 表示该元素不显示。

【讨论】：

【解决方案4】：

溢出的简单示例：隐藏http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

如果您在该页面上编辑 CCS，您可以看到溢出属性（可见 | 隐藏 | 滚动 | 自动）之间的区别 - 如果您将 display: none 添加到 css，您将看到整个内容块是消失。

基本上，这是一种控制布局和元素“流动”的方式 - 如果您允许用户输入（例如来自 CMS 字段），以在固定大小的块中呈现，您可以调整溢出属性以阻止框在大小，因此破坏了页面的布局。（相反， display: none 阻止元素显示，因此整个页面重新调整）

【讨论】：

【解决方案5】：

默认情况下，HTML 元素的高度与包含其内容的要求一样高。

如果你给一个 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;
}

段落中的文本将超出段落的底部边缘。

overflow 属性允许您更改此默认行为。所以，如果你加了overflow: hidden：

p {
    background-color: #ccf;
    height: 20px;
    overflow: hidden;
}

那么您将看不到段落底部边缘之外的任何文本。它将被剪裁到段落的固定高度。

display: none 只会使整个段落（视觉上）消失，蓝色背景等等，就好像它根本没有出现在 HTML 中一样。

【讨论】：

【解决方案6】：

假设您有一个尺寸为 100 x 100 像素的 div

然后您将一大堆文本放入其中，例如溢出 div。如果使用overflow: hidden;，则适合100x100的文字不会显示，不会影响布局。

display: none 完全不同。如果div 仍然可见，它将呈现页面的其余部分好像。即使有溢出，也会被考虑在内。它只是为div 留出空间，但不渲染它。如果两者都设置：display: none; overflow: hidden;，则不会显示，文本不会溢出，页面将呈现为好像不可见的div 还在。

为了使div 完全不影响渲染，那么display: none; overflow: hidden; 都应该设置，并且还需要设置height: 0;。或使用width，或两者兼有，则页面将呈现为好像该 div 根本不存在。

【讨论】：

【解决方案7】：

overflow: hidden - 隐藏内容的溢出，与 overflow: auto 相比，在其内部内容大于其大小的固定大小的 div 上显示滚动条

display: none - 隐藏一个元素并且它完全不参与内容布局

附：两者没有区别，完全不相关

【讨论】：

【解决方案8】：

display:none 表示该标签根本不会出现在页面上（尽管您仍然可以通过 dom 与它进行交互）。其他标签之间不会有空间分配给它。溢出隐藏意味着标签以一定的高度呈现，并且任何会导致标签扩展以呈现它的文本等都不会显示。我认为您要问的是可见性：隐藏。这意味着与 display none 不同，标签是不可见的，但在页面上为它分配了空间。比如

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

显示：无将是：

测试 | |测试

可见性：隐藏将是：

测试 | |测试

在可见性：隐藏标签被渲染，它只是在页面上看不到。

【讨论】：