overflow：hidden和display：none有什么区别

StackOverflow https://stackoverflow.com/questions/132649

  •  02-07-2019
  •  | 
  •  

题

overflow：hidden和display：none？

之间有什么区别
有帮助吗？

解决方案

示例：

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

如果具有此类的块中的文本比此小框可以显示的更大（更长），则多余的文本将被隐藏。您将只看到文本的开头。

display：none; 只会隐藏块。

请注意，您还有 visibility：hidden; ，它隐藏了块的内容，但该块仍然会在布局中移动。

其他提示

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

溢出：隐藏 ：

  

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

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

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

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

基本上它是一种控制布局和元素“流动”的方法。 - 如果您允许用户输入（从CMS字段说），要在固定大小的块中渲染，您可以调整溢出属性以停止框大小增加，从而破坏页面布局。 （相反，显示：无阻止元素显示，因此整个页面重新调整）

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

假设您有一个 div ，其尺寸为100 x 100px

然后你把一大堆文本放进去，比如溢出了div。如果使用 overflow：hidden; ，则不会显示适合100x100的文本，也不会影响布局。

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

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

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

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

P.S。两者之间没有区别，它们完全不相关

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

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

显示：无：

测试| ＆NBSP; |测试

可见性：隐藏的将是：

测试| ＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; |测试

在可见性中：隐藏标记已呈现，它只是在页面上看不到。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top