overflow：hidden和display：none

Question

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

Answer 1

例子：

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

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

display: none;只会隐藏块。

请注意，您也有visibility: hidden;，它隐藏块的内容，但块仍然在布局中移动。

Answer 2

溢出：隐藏只是说，如果文本流出此元素的滚动条不显示。显示：没有说元素没有显示。

Answer 3

比方说，你有一个div测量100×100像素

然后你把一大堆文字到它，比如它溢出的股利。如果您使用overflow: hidden;，那么适合100x100的文本将不会显示，并且不会影响布局。

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

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

Answer 4

display: none从页面中删除元素，并且页面的流动就好像根本没有。

overflow: hidden：

的CSS overflow: hidden属性可用于一个元件的更多或更少，基于浏览器窗口的宽度来揭示。

Answer 5

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

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

显示：无将是：

测试|   |测试

能见度：隐藏将是：

test |                                             |测试

在能见度：隐藏标记呈现，它只是在页面上看不到。

Answer 6

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

如果编辑页面上的CCS，你可以看到溢出的区别属性（可见|隐藏|滚动|自动） - 如果你添加显示：无到CSS，你会看到整个内容块消失。

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

Answer 7

overflow：hidden - 隐藏内容的溢出，与溢出相比：auto在固定大小div上显示滚动条的地方它的内含量大于它的大小

显示：无 - 隐藏的元素，它在内容布局完全不参与者

PS有两个没有什么区别，他们是完全无关的

Answer 8

默认情况下，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出现在所有。