有意思的方向裁切 overflow: clip
本文将介绍一个新特性,从 Chrome 90 开始,overflow 新增的一个新特性 -- overflow: clip
,使用它,轻松的对溢出方向进行控制。
overflow: clip 为何
首先,简单介绍下 overflow: clip
的用法。
overflow: clip
: 与 overflow: hidden
的表现形式极为类似,也是对元素的 padding-box
进行裁剪。
但是,它们有两点不同:
- 也就是
overflow: clip
内部完全禁止任何形式的滚动。当然,这个不是今天的重点,暂且略过不谈。
MDN 原文:The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
overflow: clip
可以从 x,y 轴方向上对裁剪进行,控制,而overflow: hidden
不行。
重点在于这一点。我们来简单示意一下:
overflow: clip && overflow: hidden 的表现
我们来看对于不区分方向,overflow: clip
与 overflow: hidden
的表现形式:
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div class="hidden">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div class="clip">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
.hidden {
overflow: hidden;
}
.clip {
overflow: clip;
}
我们设置了 3 个 DIV 容器,其中一个不设置 overflow,另外两个分别设置 overflow: clip
与 overflow: hidden
。效果如下:
此时,overflow: clip
与 overflow: hidden
的表现是一致的。
overflow: clip
在 x/y 轴上可单独设置
然而,overflow: clip
的与众不同之处在于,它可以单独设置给 x 轴或者 y 轴,使得容器拥有某一个方向上的裁剪能力,而相对的另外一个方向,允许溢出。
看看这个 DEMO:
这里的现象值得注意:
- 单单设置
overflow-x: hidden
或者overflow-y: hidden
,表现形式都和overflow: hidden
一致,是全方位的裁剪 - 而水平 x 或竖直 y 方向的
overflow-x: clip
/overflow-y: clip
配合另一个方向的overflow-x: visible
,却能够实现一个方向允许溢出,一个方向实现裁剪!
完整的 DEMO,你可以戳这里:CodePen Demo -- overflow: hidden & overflow: clip
至此,我们就实现了这样一种效果,允许元素在 x/y 方向上的单向裁剪,像是这样:
(上图允许 x 轴方向上的溢出,而 y 轴方向进行了裁剪)
上、下、左、右单个方向上的裁剪
OK,那么,如果再进一步。譬如有这么个需求,要求上、左、右方向允许溢出,而下方向需要裁剪,能做到么?
答案是可以的。
CSS 中其实还有多种方式可以进行元素的裁切,近似的实现类似于 overflow: hidden
的功能。
譬如,其中,我们可以使用 clip-path
实现上、下、左、右 单一方向的裁剪。这是我之前一篇文章的内容 -- 如何不使用 overflow: hidden 实现 overflow: hidden,感兴趣可以看看。
最后
好了,本文到此结束,今天是一个非常小的技巧,希望对你有帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
有意思的方向裁切 overflow: clip的更多相关文章
- Canvas中的剪切clip()方法
Canvas中的剪切 接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域.它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行.在默认情 ...
- 怎么实现CSS限制字数,超出部份显示点点点.
如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...
- 上学时的HTML+JS+CSS(小总结)
html:超文本标记语言 基本标签: { 文本标签:<pre></pre>:原封不动的保留空白区域. <br />:换行. <hr wid ...
- ellipsis
语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切(clip这个参数是不常用的!) ellipsis ...
- 用CSS做长度超过长度显示‘...’,当鼠标放上时显示全部内容
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku ...
- HTML5简单入门系列(八)
前言 本篇介绍HTML5中相对复杂的一些APIs,其中的数学知识比较多.虽然如此,但是其实API使用起来还是比较方便的. 这里说明一下,只写出API相关的JS代码,因为他们都是基于一个canvas标签 ...
- CSS实现限制字数功能
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...
- CSS限制字数,超出部份显示点点点...
最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...
- Flutter 布局(八)- Stack、IndexedStack、GridView详解
本文主要介绍Flutter布局中的Stack.IndexedStack.GridView控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Stack A widget that po ...
随机推荐
- 区分 python 爬虫或者是写自动化脚本时遇到的 content与text的作用
通常在使用过程中或许我们能够轻而易举的会使用requsts模块中的content 与 text ,从print结果来看根本看不出任何区别: 总结精髓,text 返回的是unicode 型的数据,一般是 ...
- 第2章 C++编程入门
C++中的数据分为常量和变量. 2.1常量(Constants) 顾名思义,常量的值在程序中不能改变 Type of constant(常量数据类型) | integer:整型 | floating- ...
- Acwing785.快速排序
Acwing785.快速排序 快排模板: y总教学大法好~: #include <iostream> using namespace std; const int N = 1000010; ...
- 方法(method)
方法是可以完成某个特定的功能,并且可以重复利用的代码片段...C中叫为函数 方法定义在类体中,不可定义在主方法下. 一个方法执行完就会被释放, 提高代码的复用性 相同的业务逻辑就可以不用重复,,,,因 ...
- BUUCTF-被劫持的礼物
被劫持的礼物 看提示用wireshark打开,找登陆流量包,过滤http .login目录的 账号密码加一起MD5小写即可. 1d240aafe21a86afc11f38a45b541a49
- Vue回炉重造之三次封装axios
源码目录 在src目录下建立一个request文件夹.里面建立两个文件: http.js api.js 源码内容 http.js import axios from 'axios' // 引入axio ...
- Spring XmlBeanFactory 容器的基本实现
容器的基本用法 熟悉 Spring 的朋友应该都很了解下段代码: public void testBeanFactory() { BeanFactory bf = new XmlBeanFactory ...
- 注册器机制Registry
在众多深度学习开源库的代码中经常出现Registry代码块,例如OpenMMlab,facebookresearch和BasicSR中都使用了注册器机制.这块的代码经常会让新使用这些库的初学者感到一头 ...
- Cisco Packet Tracer Student(思科网络模拟器)模拟集线器和嗅探攻击
一.集线器简介 集线器是局域网内的基础设备,工作于OSI中的物理层,作用是将接收的信号进行放大再传输,集线器是纯硬件设施,集线器开发之初就没考虑过软件层面的操作,所以不具备像路由器.交换机等设备那样具 ...
- Tomcat日志乱码解决方法
将配置文件logging.properties所有含有UTF-8的删除