专栏首页编程灵活的 overflow

灵活的 overflow

来源: 大漠

https://www.w3cplus.com/css/flexible-overflow.html

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

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

Demo1

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

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

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

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

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

长文本变得更短

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

实现方案

首先在我们的模板中有两部分结构,都放置在的容器当中,其中中放置的是短文本内容,同时还有一个容器中放置的是长文本内容。为了让内容更具可读性,在短文本的容器中使用和来提高阅读性。比如:

Shorttext hereis.

Some long text that could become shorter.

这里我们将用到CSS的属性。将容器设置为,并且同时把的值设置为。然后再和设置不同的样式。另外对于不支持的浏览器,依旧采用来处理。

.overflower

{

line-height:1.5em;

display:inline-block;

overflow:hidden;

box-sizing:border-box;

max-width:100%;

height:1.5em;

white-space:nowrap;

text-overflow:ellipsis;

}.overflower-long

{

display:inline;

}.overflower-short

{

display:none;

}@supports(flex-wrap:wrap)

{

.overflower

{

display:inline-flex;

flex-wrap:wrap;

}.overflower-short

{

display:block;

overflow:hidden;

width:;

text-overflow:ellipsis;

flex-grow:1;

}.overflower-long

{

flex-basis:100%;

}

}

原理就是这么简单,我们来看几个实例:

Demo2(https://codepen.io/airen/pen/vWbyJd)

拖动容器右下角改变容器大小,或者选择复选框,你将看到与众不同的效果:

他们是如何工作的,来看看CSS:

使用@supports做了一个渐进增强的处理,如果浏览器支持flex-wrap属性,那么将使用Flexbox的一些属性的特性,比如容器overflower为inline-flex容器,然后配合flex-grow:1和text-overflow:ellipsis来处理短文本样式,对于长文本,将flex-basis设置为100%

另外需要给容器一个固定的高度。所以设置height的值,同时为了文本能垂直居中,再设置line-height的值和height等同

对于不支持flex-wrap的浏览器,在overflower也就是最外面的容器中,通过text-overflow:ellipsis和white-space来控制文本,当然这个时候短文本就不显示了

大致就是这样的一个工作原理。虽然这种方法让我们实现了灵活的,效果是更让人感觉很爽,但对于追求HTML干净的同学而言,这是一件无法忍受的事情。为了这种效果,让我们的HTML变得冗余。鱼和熊掌不可兼得嘛!

通过这个效果,再次验证了CSS的强大!

除此之外,为了记残障人士能更好的访问网站,这里还通过以及之类的属性,增强可阅读性。

总结

这篇文章主要思路是来自于@kizmarh发的博文,作者的创意让我佩服的五体投地。通过牺牲HTML的冗余,配合一些CSS的特性,比如Flexbox独有的特性,CSS强大的选择器,可以帮助我们灵活的实现的效果。也就是说,不借助任何的JavaScript代码,可以让我们根据容器的大小显示不同的文本,让我们的用户体验更为友好。感兴趣的同学不仿试试。

本文来自企鹅号 - 代码技巧媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 了解云容器的四方面

    对容器的大量需求使企业推出了各种云容器服务。而市场上这么多的选择,很难决定去使用哪一个容器平台或工具。在你了解云容器技术的选择之前,你必须先确定容器是否值得您的...

    企鹅号小编
  • 【分享吧】带你初识Docker

    一、引言 如今,Docker作为业界领先的轻量级虚拟化容器管理引擎,给全球开发者提供了一种新颖、便捷的软件集成测试与部署之道。Docker借助容器技术彻底释放了...

    企鹅号小编
  • 王健林旗下万达网科被曝大裁员 总裁出面说话了

    处于风口浪尖的万达网络科技集团(以下简称万达网科)再陷裁员风波。 12月28日,据澎湃新闻报道称,有知情人士透露,万达网科从12月28日当天开始大规模裁员,据称...

    企鹅号小编
  • Centos7安装LAMP+PHPmyadmin

    1、更新Centos7下载源 更新之前记得备份!!! wget -O /etc/yum.repos.d/CentOS-Base.repo http://mi...

    苦咖啡
  • 几个Python小案例,爱上Python编程!

    Python是一种面向对象的解释型编程语言,源代码与解释器CPython遵守GPL协议,Python语法简洁清晰。

    一墨编程学习
  • 全屏、沉浸式、fitSystemWindow使用及原理分析:全方位控制“沉浸式”的实现

    状态栏与导航栏属于SystemUi的管理范畴,虽然界面的UI会受到SystemUi的影响,但是,APP并没有直接绘制SystemUI的权限与必要。APP端之所以...

    看书的小蜗牛
  • 用keras搭建3D卷积神经网络

    资源: 3D卷积神经网络相关博客:http://blog.csdn.net/lengxiaomo123/article/details/68926778 ker...

    企鹅号小编
  • 谁是“顶会狂魔”?周明、张潼等上榜,清华第四,北大第六 | 2018 ML和NLP顶会论文统计出炉

    近日,剑桥大学数据科学家Marek Rei发表博文,统计了过去一年ML和NLP顶会论文情况。

    量子位
  • 大玩家入场无人车:亚马逊、苹果的野心和秘密(还有人要上天)

    李杉 陈桦 编译整理 量子位 报道 | 公众号 QbitAI 大玩家还在不断涌入无人车领域。 最近又有两家真正的科技巨头,被首次证实已经开始涉足无人车。一家是市...

    量子位
  • 你必须知道的session与cookie

    Java中文社群_老王

扫码关注云+社区

领取腾讯云代金券