overflow:hidden和display:none有什么区别
题
overflow:hidden和display:none?
之间有什么区别解决方案
示例:
.oh
{
height: 50px;
width: 200px;
overflow: hidden;
}
如果具有此类的块中的文本比此小框可以显示的更大(更长),则多余的文本将被隐藏。您将只看到文本的开头。
display:none;
只会隐藏块。
请注意,您还有 visibility: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; |测试
在可见性中:隐藏标记已呈现,它只是在页面上看不到。