css - 溢出：隐藏和显示：无有什么区别

Question

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

score 27 · Accepted Answer

例子：

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

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

display: none;只会隐藏块。

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

score 9 · Accepted Answer

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

overflow: hidden：

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

score 5 · Accepted Answer

溢出：隐藏只是说如果文本在这个元素之外流动，滚动条就不会显示。display:none 表示该元素未显示。

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

默认情况下，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 中一样。

score 1 · Accepted Answer

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

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

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

为了使div完全不影响渲染，display: none; overflow: hidden;则应设置两者，并执行诸如 set 之类的操作height: 0;。或者使用width，或者两者都使用，那么页面将被呈现，就好像 div 根本不存在一样。

score 1 · Accepted Answer

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

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

显示：无将是：

测试 | | 测试

可见性：隐藏将是：

测试 | | 测试

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

score 1 · Accepted Answer

溢出：隐藏 - 隐藏内容的溢出，与溢出相反：自动在固定大小的 div 上显示滚动条，其内部内容大于其大小

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

PS这两者没有区别，完全不相关

css - 溢出：隐藏和显示：无有什么区别

8 回答 8

Related

Reference