灵活的overflow

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

说到overflow对于CSSer而言并不会陌生,用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取,另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是,我们今天要说的灵活overflow

前两天@kizmarh发的博文,让我眼前一亮。再次让我不得不佩服国外的工程师的创新能力。大家可能会说是什么效果呢?又是什么效果才能称得上是灵活的overflow呢?别的不多说,先上一个效果:

初看效果,好象并没有两样。如果想看到与众不同的效果,大家可以在上面的Demo做一下相关的操作。比如,将容器慢慢的变小,或者选择复选框,就能看到不同的效果:

灵活的overflow

那么这样的效果是怎么实现的呢?这就是接下来要介绍的。

很多同学可能会使用CSS的媒体查询来制作响应式的网站。而在当时当日,有些组件不能只依赖于视窗的宽度来做为条件的判断。而是依赖于不同的条件做出不一样的响应。

有一个很好的解决方案是Container Queries,而它的前身是Element Queries。他们的未来并不确定,但是其中的一些特性,可以通过Polyfills来实现。但话又说回来,使用Polyfill来实现一些特性,并不是长远的方案,而且要通过Polyfill达到每一个特性,那也是一件非常艰巨的任务。

但是我们只能依赖于JavaScript或者说Container Queries?如果我们使用CSS就能解决Container Queries提供的一些特性,那是不是一个更值得可取的方案呢?接下来就来看几个常见的例子。

长文本变得更短

在我们Web的实际使用中,常有这样的一种效果。在有足够的空间里显示所有的文本内容出来,但在没有足够的空间里,通过text-overflow:ellipsis把要显示的内容变短。但我们并不只是想把内容截取,比如我们想在有足够的空间显示一行文本,在不足够的空间内显示另一行文本,甚至是在更短的空间,只通过一个图标来显示。这也就是你在文章开头看到的效果。那么这

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/flexible-overflow.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部