位置: IT常识 - 正文
html 隐藏和显示(html怎么设置隐藏元素)
编辑：rootadmin推荐整理分享html 隐藏和显示(html怎么设置隐藏元素)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:html设置隐藏,html怎么设置隐藏元素,html隐藏tr,html设置隐藏内容,html设置隐藏内容,html隐藏tr,html设置隐藏,html设置隐藏,内容如对您有帮助，希望把文章链接给更多的朋友！
本质:让一个元素在页面中显示或者隐藏 1.display 显示隐藏 2.visibility 显示隐藏 3.overflow 溢出隐藏
正文：
1. display: block; 除了转化为块级元素的效果 还有显示的意思 display: none; 隐藏后不占空间 文字过多可以将变为一行 多余的隐藏 (三行代码一起使用) overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
2.对齐 margin: auto; width: 50%; border: 3px solid green; padding: 10px; text-align: center; /*文字居中*/
3. 单行文本 1.文本溢出 需要给文本设定 宽度 Overflow属性,规定了当内容溢出元素框的时候内容如何处理的事情 overflow：scroll 属性的时候，下面和右边都有滚动条 （scroll是下边和右边都有框） visible : 默认属性，内容会溢出黄色框 hidden： 内容被修剪， 65后面的内容看不见了 text-overflow:ellipsis; 文本溢出后 省略 ellipsis：省略 的意思 overflow: hidden; 意思文本溢出后修剪 white-space:nowrap; 属性表示禁止单元格中的文字自动换行。 nowrap属性表示禁止单元格中的文字自动换行。但使用时要注意的是，td元素noWrap属性的行为与td元素的width属性有关。td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度，则nowrap属性起作用的，如果设置了td宽度，则nowrap属性不起作用。 nowrap=true的时候不能换行 nowrap=false可以换行 /*设置文本不换行 只有一行*/ white-space: nowrap; /* 超出部分隐藏 */ overflow: hidden; /* 超出部分 显示为省略号 */ text-overflow: ellipsis; hidden:裁剪内容 不提供滚动机制 visible 不裁剪内容,可能会显示在内容框之外 默认值 scroll 裁剪内容提供滚动机制 不管内容超不超出盒子都显示滚动条 auto 如果溢出框,则应该提供滚动机制,溢出的时候才显示滚动条,不超出则不显示滚动条. 总结:一边情况下,不想让超出的部分显示出来,因为溢出会影响布局 但是如果盒子有定位,慎用 overflow:hidden;因为他会隐藏多余的部分
2.多行文本溢出显示省略号 /* 不属于css规范属性 */ /* 设置为弹性伸缩盒子 */ display:-webkit-box ; /* -webkit-box-orient设置伸缩盒子内容的排列方式 vertical 设置从上到下垂直排列方式 orient 朝向面向 */ -webkit-box-orient: vertical; /* 设置行数 后面直接写行数数值 clamp 行数 */ -webkit-line-clamp: 3; overflow: hidden;
4. visibility 属性设置元素是否可见。 语法: Object.style.visibility=visible|hidden|collapse visible 默认。元素框是可见的。 visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间 hidden 元素框不可见，但仍然影响布局。 collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
上一篇：【AutoGPT】你自己运行，我先睡了—— ChatGPT过时了吗？
