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"。
html 隐藏和显示相关推荐
- VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
- jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示toggle()方法:可以使用它来切换hide ...
- 安卓超过两行就加省略号_CSS文本超出2行就隐藏并且显示省略号
超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是 ...
- html css 隐藏和显示按钮
html 隐藏和显示按钮 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- android h5状态栏消息,安卓实现系统状态栏的隐藏和显示
尤其视频类APP,需要实现切换到横屏后,隐藏系统状态栏,全屏显示,以实现看更大画面的视频.当切换回竖屏后,又显示状态栏.那么如何实现呢? 网上流传着很多种做法.比如: 1.在AndroidManife ...
- 前端笔记(9)元素的隐藏与显示,css用户界面样式,vertical-align垂直对齐,溢出文字省略号显示,css精灵技术,过渡,焦点,滑动门,margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式 鼠标样式cursor 轮廓线outline ...
- 原生js设置div隐藏或者显示_JS实现“隐藏与显示”功能(多种方法)
下面我将效果图展示出来: 1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: 通过按钮实现隐藏和显示 .body{ margin: 0 auto; } #show{ wi ...
- Android下PopupWindow隐藏及显示(showAtLocation/showAsDropDown)
转载:http://orgcent.com/android-popupwindow-showasdropdown-showatlocation/ 上一篇对PopupWindow的用法(位置.动画.焦点 ...
- easyui 隐藏和显示datagrid
2019独角兽企业重金招聘Python工程师标准>>> easyui隐藏datagrid后,再让其显示,如果用display:block或者display的其他参数时会出现datag ...
- 下拉菜单显示 隐藏html,根据在下拉列表中选择的内容隐藏和显示HTML元素
我的网站是在ASP classic - VBScript中创建的(不是我的选择,也是我之前没有过的语言).我试图在其中创建一个网页:下拉菜单显示了基于第一个选择内容的额外下拉菜单.我正在尝试使用Jav ...
最新文章
- 浅谈lastIndexOf
- 2012 Hadoop summit
- 学习Kotlin(四)对象与泛型
- 转载:JAVA 操作 Ant API
- 【数据结构与算法】之深入解析“解数独”的求解思路与算法示例
- UITextView: 响应键盘的 return 事件(收回键盘)
- Jenkins 详细安装、构建部署 使用教程
- 苹果CMS v10模板最近很火的电影先生v1.0.2修复版
- 串口速度,RS232与MAX232的区别
- 安装与卸载软件的方法:rpm、yum工具介绍
- Tomcat(Install)
- 如何理解,互联网架构“高并发”?
- [翻译] ASP.NET MVC Framework控制器操作安全性
- 常见排序算法的python实现
- 教训:LINUX复制文件到U盘丢失
- eclipse中文版
- 他25岁进贝尔实验室,32岁提信息论,40岁办达特茅斯会议,晚年患上阿兹海默 | 人物志
- 安泰电子科普:电压源和电流源的区别是什么意思
- 卡数字怀念的东西:魔方
- 95后国风艺术家联手AI,立志耗时一年,作百米长卷《新西湖繁胜全景图》献礼杭州亚运!...
热门文章
- 云队友丨知乎高赞:35岁失业的中年人,都去了哪儿?
- 风云卡五星android版本,卡五星麻将下载_卡五星麻将手机版下载_卡五星麻将安卓版下载-木蚂蚁...
- Windows 命令行窗口黑屏问题
- 华为自研OS已7年 罗森证券:首批鸿蒙系统设备出货量将达100万台
- 中国传媒大学,自考宁夏助学数字媒体艺术专业
- 计算机大专当兵吃香吗,大专学生参军有这么多好处,现在已经有好多人后悔没参军...
- uniapp云打包安卓和IOS
- 老电脑如何利用云服务器提升性能,把旧电脑变成云电脑?让手机运行大型PC游戏...
- 第十五次 Java作业
- iOS系统键盘和自定义键盘的切换