✍ 什么是溢出呢,为什么要讲溢出属性呢。下面我们创建一个200*150的div标签大小,背景色为橙色,内容为一串英文

代码演示:

 结果:

 结果发现这个文本有溢出的情况,背景上放不下这个文本,所以有一部分溢出了,那我们该怎么显示这个溢出的文本呢,这就涉及到我们接下来要说的溢出属性了。往下看

✍溢出的解决办法有:

(1)隐藏  (2)滚动条  (3)用省略号显示  (4)

✍溢出属性介绍:

✍我们来演示一下这些属性:

(1)overflow:visible:

* 默认值,溢出元素会显示在元素外;这个不用演示,就跟我们普通形式一样默认是溢出显示。效果如下:

(2)overflow:hidden:

* 溢出内容隐藏,只要超过盒子的都会隐藏,比如说一段英文上半部分显示在盒子里,下半部分显示在盒子外,那盒子外的部分就也会隐藏,这样那段英文就会被截断。
代码:

 结果:

 (3)overflow:scroll:

* 只要加上了这段代码就会出现滚动条,只是如果文本没有超过盒子,那滚动条是被禁用的,如果文本超过了盒子,滚动条就会启用
代码:

 结果:

 文本没有超过盒子的效果:滚动条被禁用

 (4)overflow:auto:

* 如果有溢出就会添加滚动条,没有溢出就正常显示
没溢出:

 结果:

 溢出的效果:

(5)overflow:inherit:

* 规定应该遵从父元素继承overflow属性的值。这个不常用就不演示了

(6)overflow-x:auto/hidden/scroll/inherit   
overflow-y: auto/hidden/scroll/inherit

* x轴和y轴同时设置可以实现一个方向上的样式,比如说x方向上的滚动条显示:
* overflow-x:auto    overflow-y:hidden 
* 要同时设置x和y的属性值,不然实现不了 

(7)white-space:nowrap:

*
盒子里的文本不受盒子控制,不会根据盒子换行,会在同一行上显示,直到遇见<br>标签为止和overflow:hidden;以及text-overflow:ellipsis一起写就能出现省略号的效果啦 
代码演示:

结果:

 没有加white-space:nowrap这句代码之前的结果是:

 对比一下,发现加代码之后,文本就变成了一行显示,这就是我们要写出省略号之前要做的事情,

和overflow:hidden;以及text-overflow:ellipsis结合出现省略号的效果,解决溢出问题

代码如下:

结果:

✍text-overflow属性解释: 

✍注意一下几点,文本溢出才能显示省略号: 

第一个的意思是:必须有宽度width

 white-space的其他属性,都不常用所以在这里就不演示了,常用的就nowrap,记住这个既可以了

技术
今日推荐
PPT
阅读数 82
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信