Question

overflow：hidden和display：none？

之间有什么区别

Answer 1

示例：

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

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

display: none;只会隐藏阻止。

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

Answer 2

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

overflow: hidden：

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

Answer 3

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

Answer 4

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

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

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

Answer 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中一样。

Answer 6

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

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

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

为了使div完全不影响渲染，应设置display: none; overflow: hidden;和设置height: 0;之类的内容。或者使用width或两者，然后页面将呈现为好像div根本不存在。

Answer 7

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

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

显示：无：

测试| |测试

可见性：隐藏的将是：

测试| |测试

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

Answer 8

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

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

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

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

8 个答案: