本文将介绍一个新特性,从 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. QT 基于QScrollArea的界面嵌套移动

    在实际的应用场景中,经常会出现软件界面战场图大于实际窗体大小,利用QScrollArea可以为widget窗体添加滚动条,可以实现小窗体利用滚动条显示大界面需求.实现如下: QT创建一个qWidget ...

  2. JuiceFS V1.0 RC1 发布,大幅优化 dump/load 命令性能, 深度用户不容错过

    各位社区的伙伴, JuiceFS v1.0 RC1 今天正式发布了!这个版本中,最值得关注的是对元数据迁移备份工具 dump/load 的优化. 这个优化需求来自于某个社区重度用户,这个用户在将亿级数 ...

  3. react-router v6对比react-router v5

    简述:     1. react-router v6 原生支持typeScript ; 安装方法 npm install react-router-dom@6    2. react-router v ...

  4. C++ 炼气期之变量的生命周期和作用域

    1. 前言 什么是变量的生命周期? 从变量被分配空间到空间被收回的这一个时间段,称为变量的生命周期. 什么是变量的作用域? 在变量的生命周期内,其存储的数据并不是在任何地方都能使用,变量能使用的范围, ...

  5. 一文精通HashMap灵魂七问,你学还是不学

    如果让你看一篇文章,就可以精通HashMap,成为硬刚才面试官的高手,你学还是不学? 别着急,开始之前不如先尝试回来下面几个问题吧: HashMap的底层结构是什么? 什么时候HashMap中的链表会 ...

  6. .NET6接入Skywalking链路追踪完整流程

    一.Skywalking介绍 Skywalking是一款分布式链路追踪组件,什么是链路追踪? 随着微服务架构的流行,服务按照不同的维度进行拆分,一次请求往往需要涉及到多个服务.互联网应用构建在不同的软 ...

  7. 用WindowsAppSDK(WASDK)优雅的开发上位机应用

    C#开发上位机应用的一些选择 如果你不想看介绍,可以直接跳到优雅开发示例那里. 1. WASDK(WinUI 3) Windows 应用 SDK 是一组新的开发人员组件和工具,它们代表着 Window ...

  8. 超 Nice 的表格响应式布局小技巧

    今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时, ...

  9. 理解 Python 的 for 循环

    在本篇博客中,我们将讨论 Python 中 for 循环的原理. 我们将从一组基本例子和它的语法开始,还将讨论与 for 循环关联的 else 代码块的用处. 然后我们将介绍迭代对象.迭代器和迭代器协 ...

  10. 论HashMap、Hashtable、TreeMap、LinkedHashMap的内部排序

    参考文章 论HashMap.Hashtable.TreeMap.LinkedHashMap的内部排序