本文将介绍一个新特性,从 Chrome 90 开始,overflow 新增的一个新特性 -- overflow: clip,使用它,轻松的对溢出方向进行控制。

overflow: clip 为何

首先,简单介绍下 overflow: clip 的用法。

overflow: clip: 与 overflow: hidden 的表现形式极为类似,也是对元素的 padding-box 进行裁剪。

但是,它们有两点不同:

  1. 也就是 overflow: clip 内部完全禁止任何形式的滚动。当然,这个不是今天的重点,暂且略过不谈。

MDN 原文:The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.

  1. overflow: clip 可以从 x,y 轴方向上对裁剪进行,控制,而 overflow: hidden 不行。

重点在于这一点。我们来简单示意一下:

overflow: clip && overflow: hidden 的表现

我们来看对于不区分方向,overflow: clipoverflow: 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: clipoverflow: hidden。效果如下:

此时,overflow: clipoverflow: hidden 的表现是一致的。

overflow: clip 在 x/y 轴上可单独设置

然而,overflow: clip 的与众不同之处在于,它可以单独设置给 x 轴或者 y 轴,使得容器拥有某一个方向上的裁剪能力,而相对的另外一个方向,允许溢出。

看看这个 DEMO:

这里的现象值得注意:

  1. 单单设置 overflow-x: hidden 或者 overflow-y: hidden,表现形式都和 overflow: hidden 一致,是全方位的裁剪
  2. 而水平 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的更多相关文章

  1. Canvas中的剪切clip()方法

    Canvas中的剪切 接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域.它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行.在默认情 ...

  2. 怎么实现CSS限制字数,超出部份显示点点点.

    如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...

  3. 上学时的HTML+JS+CSS(小总结)

    html:超文本标记语言 基本标签: { 文本标签:<pre></pre>:原封不动的保留空白区域.      <br />:换行.      <hr wid ...

  4. ellipsis

    语法:  text-overflow : clip | ellipsis 参数:  clip : 不显示省略标记(...),而是简单的裁切(clip这个参数是不常用的!)      ellipsis ...

  5. 用CSS做长度超过长度显示‘...’,当鼠标放上时显示全部内容

    <!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku ...

  6. HTML5简单入门系列(八)

    前言 本篇介绍HTML5中相对复杂的一些APIs,其中的数学知识比较多.虽然如此,但是其实API使用起来还是比较方便的. 这里说明一下,只写出API相关的JS代码,因为他们都是基于一个canvas标签 ...

  7. CSS实现限制字数功能

    <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...

  8. CSS限制字数,超出部份显示点点点...

    最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...

  9. Flutter 布局(八)- Stack、IndexedStack、GridView详解

    本文主要介绍Flutter布局中的Stack.IndexedStack.GridView控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Stack A widget that po ...

随机推荐

  1. 区分 python 爬虫或者是写自动化脚本时遇到的 content与text的作用

    通常在使用过程中或许我们能够轻而易举的会使用requsts模块中的content 与 text ,从print结果来看根本看不出任何区别: 总结精髓,text 返回的是unicode 型的数据,一般是 ...

  2. 第2章 C++编程入门

    C++中的数据分为常量和变量. 2.1常量(Constants) 顾名思义,常量的值在程序中不能改变 Type of constant(常量数据类型) | integer:整型 | floating- ...

  3. Acwing785.快速排序

    Acwing785.快速排序 快排模板: y总教学大法好~: #include <iostream> using namespace std; const int N = 1000010; ...

  4. 方法(method)

    方法是可以完成某个特定的功能,并且可以重复利用的代码片段...C中叫为函数 方法定义在类体中,不可定义在主方法下. 一个方法执行完就会被释放, 提高代码的复用性 相同的业务逻辑就可以不用重复,,,,因 ...

  5. BUUCTF-被劫持的礼物

    被劫持的礼物 看提示用wireshark打开,找登陆流量包,过滤http .login目录的 账号密码加一起MD5小写即可. 1d240aafe21a86afc11f38a45b541a49

  6. Vue回炉重造之三次封装axios

    源码目录 在src目录下建立一个request文件夹.里面建立两个文件: http.js api.js 源码内容 http.js import axios from 'axios' // 引入axio ...

  7. Spring XmlBeanFactory 容器的基本实现

    容器的基本用法 熟悉 Spring 的朋友应该都很了解下段代码: public void testBeanFactory() { BeanFactory bf = new XmlBeanFactory ...

  8. 注册器机制Registry

    在众多深度学习开源库的代码中经常出现Registry代码块,例如OpenMMlab,facebookresearch和BasicSR中都使用了注册器机制.这块的代码经常会让新使用这些库的初学者感到一头 ...

  9. Cisco Packet Tracer Student(思科网络模拟器)模拟集线器和嗅探攻击

    一.集线器简介 集线器是局域网内的基础设备,工作于OSI中的物理层,作用是将接收的信号进行放大再传输,集线器是纯硬件设施,集线器开发之初就没考虑过软件层面的操作,所以不具备像路由器.交换机等设备那样具 ...

  10. Tomcat日志乱码解决方法

    将配置文件logging.properties所有含有UTF-8的删除