Css 溢出：隐藏和显示：无之间的区别是什么

溢出：隐藏和显示：无之间的区别是什么？

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

假设您有一个测量为100 x 100px的

div

然后将一大堆文本放入其中，例如它溢出了div则不显示适合100x100的文本，并且不会影响布局

---

显示：无

完全不同。它呈现页面的其余部分，就好像

div

仍然可见。即使出现溢出，也会考虑到这一点。它只为

div

留下空间，但不渲染它。如果两者都已设置：

显示：无；溢出：隐藏

则不会显示，文本不会溢出，页面将呈现为不可见的

div

仍然存在

---

为了使

div

完全不影响渲染，则两个

都显示：无；溢出：隐藏，并且还可以执行诸如set
height:0之类的操作。或者使用
宽度
，或者两者都使用，则页面将呈现为div根本不存在的样子。
显示：无
从页面中删除元素，页面的流就好像它根本不存在一样

：

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

例如：

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

如果该类块中的文本比这个小框显示的文本大（长），多余的文本将被隐藏。您将只看到文本的开头

显示：无只会隐藏块

注意，您还有
可见性：隐藏隐藏块的内容，但块仍将在布局中，移动对象。
显示：无意味着相关标记将根本不会出现在页面上（尽管您仍然可以通过dom与其交互）。在其他标记之间没有为其分配空间。溢出隐藏意味着标记以一定的高度呈现，任何会导致标记展开以呈现它的文本等都不会显示。我想你问的是可见性：隐藏。这意味着与“无显示”不同，标记不可见，但在页面上为其分配了空间。比如说

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

test |此标签中的适当样式| test

显示：无将是：

测试| |测试

可见性：隐藏将是：

测试| |测试

在可见性中：隐藏标签被呈现，它只是在页面上看不到。
溢出的简单示例：隐藏

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

基本上，这是一种控制布局和元素“流动”的方法——如果允许用户输入（比如从CMS字段），以固定大小的块呈现，则可以调整溢出属性，以阻止框的大小增加，从而破坏页面的布局。（相反，display:none会阻止元素显示，从而使整个页面重新调整）
溢出：隐藏-隐藏内容溢出，与溢出：auto相反，溢出：auto会在固定大小的div上显示滚动条，其中内部内容大于其大小

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

另外，两者之间没有区别，它们是完全不相关的
默认情况下，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;
}

那么你就看不到段落底边以外的任何文本了。它将被裁剪到段落的固定高度

display:none
只会使整个段落（视觉上）消失，蓝色背景和所有内容，就好像它根本没有出现在HTML中一样。
image？你能说元素吗？
p {
    background-color: #ccf;
    height: 20px;
    overflow: hidden;
}