有意思的方向裁切 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 ...
随机推荐
- QT 基于QScrollArea的界面嵌套移动
在实际的应用场景中,经常会出现软件界面战场图大于实际窗体大小,利用QScrollArea可以为widget窗体添加滚动条,可以实现小窗体利用滚动条显示大界面需求.实现如下: QT创建一个qWidget ...
- JuiceFS V1.0 RC1 发布,大幅优化 dump/load 命令性能, 深度用户不容错过
各位社区的伙伴, JuiceFS v1.0 RC1 今天正式发布了!这个版本中,最值得关注的是对元数据迁移备份工具 dump/load 的优化. 这个优化需求来自于某个社区重度用户,这个用户在将亿级数 ...
- react-router v6对比react-router v5
简述: 1. react-router v6 原生支持typeScript ; 安装方法 npm install react-router-dom@6 2. react-router v ...
- C++ 炼气期之变量的生命周期和作用域
1. 前言 什么是变量的生命周期? 从变量被分配空间到空间被收回的这一个时间段,称为变量的生命周期. 什么是变量的作用域? 在变量的生命周期内,其存储的数据并不是在任何地方都能使用,变量能使用的范围, ...
- 一文精通HashMap灵魂七问,你学还是不学
如果让你看一篇文章,就可以精通HashMap,成为硬刚才面试官的高手,你学还是不学? 别着急,开始之前不如先尝试回来下面几个问题吧: HashMap的底层结构是什么? 什么时候HashMap中的链表会 ...
- .NET6接入Skywalking链路追踪完整流程
一.Skywalking介绍 Skywalking是一款分布式链路追踪组件,什么是链路追踪? 随着微服务架构的流行,服务按照不同的维度进行拆分,一次请求往往需要涉及到多个服务.互联网应用构建在不同的软 ...
- 用WindowsAppSDK(WASDK)优雅的开发上位机应用
C#开发上位机应用的一些选择 如果你不想看介绍,可以直接跳到优雅开发示例那里. 1. WASDK(WinUI 3) Windows 应用 SDK 是一组新的开发人员组件和工具,它们代表着 Window ...
- 超 Nice 的表格响应式布局小技巧
今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时, ...
- 理解 Python 的 for 循环
在本篇博客中,我们将讨论 Python 中 for 循环的原理. 我们将从一组基本例子和它的语法开始,还将讨论与 for 循环关联的 else 代码块的用处. 然后我们将介绍迭代对象.迭代器和迭代器协 ...
- 论HashMap、Hashtable、TreeMap、LinkedHashMap的内部排序
参考文章 论HashMap.Hashtable.TreeMap.LinkedHashMap的内部排序