CSS3 Text-overflow
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
说到overflow
对于CSSer而言并不会陌生,用来控制内容溢出的现象。而很多时候我们还会使用text-overflow
来控制内容溢出的显示。一般是直接截取,另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是,我们今天要说的灵活overflow
。
最近在项目中使用overflow
属性的时候踩到了几个以前从未踩过的坑。在填坑的过程中发现,原来使用overflow
的时候还是有不少的坑,而且这些坑都是因为自己对该属性不甚了解所造成的,或者说是和其他CSS属性在一起使用所触发的。那么在使用overflow
应该怎么使用才能避开这些不必要的烦恼呢?或者说在使用overflow
不应该和哪些属性结合在一起使用呢?为了解开这个迷我重读了有关于overflow
的规范。今天将相关的理解和新的认知小结一下与大家共享,希望对于大家在实际使用的时候能尽可能的避开这些坑。
溢出是CSS中的另一个重要的概念。从 图解CSS系列 的《CSS 盒模型》和《元素尺寸的设置》中可以得知,Web上的内容都是放置在一个具有一定大小的盒子中。在某些情况下,盒子大小是有限制的,有可能内容会超出这些盒子,在 CSS 中,这种现象被称为 溢出。而且 W3C 的CSS工作小组专门为溢出划为一个独立的模块。在这一章中,将和大家一起探讨 CSS 溢出模块相关的话题。比如,什么是溢出?什么情况下会导致溢出?如何使用CSS来控制溢出等等。
在第一部分主要和大家聊了CSS溢出的概念和理论相关的,在第一部分主要以实例,问题排查和常见溢出问题三个部分展开。在构建 Web 页面或应用的时候,总是避免不了给容器设置一个具有约束性的尺寸,有的时候,因为容器没有足够的空间来容纳内容,从而造成内容溢出容器,严重的会打破 Web 布局,干扰页面的美观。为了让这些现象能不干扰 Web 布局,所以需要CSS溢出特性。除此之外,我们在构建一些Web组件和实现一些UI效果,也需要依赖CSS溢出特性。那么接下来,我们来看一些溢出相关的案例。